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

feat(theme,interfaces): Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-29 01:20:24 +00:00
parent 9175799ec6
commit e38d3cd42a
78 changed files with 1413 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts
View File

@@ -44,7 +44,7 @@ export const demoFunc = () => html`
{ key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
]
}
] as interfaces.ISecondaryMenuGroup[]}
] as interfaces.IMenuGroup[]}
@item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
></dees-appui-secondarymenu>
<div class="spacer"></div>

19
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
View File

@@ -15,6 +15,7 @@ import {
cssManager,
} from '@design.estate/dees-element';
import { demoFunc } from './dees-appui-secondarymenu.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
/**
* Secondary navigation menu for sub-navigation within MainMenu views
@@ -32,15 +33,15 @@ export class DeesAppuiSecondarymenu extends DeesElement {
/** Grouped items with collapse support */
@property({ type: Array })
accessor groups: interfaces.ISecondaryMenuGroup[] = [];
accessor groups: interfaces.IMenuGroup[] = [];
/** Legacy flat list support for backward compatibility */
@property({ type: Array })
accessor selectionOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
accessor selectionOptions: (interfaces.IMenuItem | { divider: true })[] = [];
/** Currently selected item */
@property({ type: Object })
accessor selectedItem: interfaces.ISecondaryMenuItem | null = null;
accessor selectedItem: interfaces.IMenuItem | null = null;
/** Internal state for collapsed groups */
@state()
@@ -51,8 +52,10 @@ export class DeesAppuiSecondarymenu extends DeesElement {
accessor collapsed: boolean = false;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
--sidebar-width-expanded: 240px;
--sidebar-width-collapsed: 56px;
@@ -482,7 +485,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
`;
}
private renderMenuItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
private renderMenuItem(item: interfaces.IMenuItem, group?: interfaces.IMenuGroup): TemplateResult {
const isSelected = this.selectedItem?.key === item.key;
return html`
<div
@@ -507,7 +510,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
if ('divider' in option && option.divider) {
return html`<div class="divider"></div>`;
}
const item = option as interfaces.ISelectionOption;
const item = option as interfaces.IMenuItem;
return this.renderMenuItem({
key: item.key,
iconName: item.iconName,
@@ -537,7 +540,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}));
}
private selectItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): void {
private selectItem(item: interfaces.IMenuItem, group?: interfaces.IMenuGroup): void {
this.selectedItem = item;
item.action();
@@ -548,7 +551,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}));
}
private handleContextMenu(event: MouseEvent, item: interfaces.ISecondaryMenuItem): void {
private handleContextMenu(event: MouseEvent, item: interfaces.IMenuItem): void {
DeesContextmenu.openContextMenuWithOptions(event, [
{
name: 'View details',
@@ -582,7 +585,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}
} else if (this.selectionOptions.length > 0) {
// Legacy mode: select first non-divider option
const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.ISelectionOption;
const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.IMenuItem;
if (firstOption && !this.selectedItem) {
this.selectItem({
key: firstOption.key,