feat(theme,interfaces): Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
import { html, cssManager } from '@design.estate/dees-element';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
// Create the activity log element
|
||||
const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
|
||||
|
||||
// Add demo entries after the element is connected
|
||||
setTimeout(() => {
|
||||
activityLog.addMany([
|
||||
{ type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
|
||||
{ type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
|
||||
{ type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
|
||||
{ type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
|
||||
{ type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
|
||||
{ type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
|
||||
{ type: 'logout', user: 'Alice Brown', message: 'logged out' },
|
||||
{ type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
|
||||
]);
|
||||
|
||||
// Subscribe to updates
|
||||
activityLog.entries$.subscribe((entries) => {
|
||||
console.log('Activity log updated:', entries.length, 'entries');
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
.demo-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 600px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
|
||||
padding: 32px;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
${activityLog}
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
@@ -12,53 +12,14 @@ import {
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
import '../../dees-icon/dees-icon.js';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import type { IActivityEntry, IActivityLogAPI } from '../../interfaces/appconfig.js';
|
||||
import { demoFunc } from './dees-appui-activitylog.demo.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
@customElement('dees-appui-activitylog')
|
||||
export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
|
||||
// STATIC
|
||||
public static demo = () => {
|
||||
// Create the activity log element
|
||||
const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
|
||||
|
||||
// Add demo entries after the element is connected
|
||||
setTimeout(() => {
|
||||
activityLog.addMany([
|
||||
{ type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
|
||||
{ type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
|
||||
{ type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
|
||||
{ type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
|
||||
{ type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
|
||||
{ type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
|
||||
{ type: 'logout', user: 'Alice Brown', message: 'logged out' },
|
||||
{ type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
|
||||
]);
|
||||
|
||||
// Subscribe to updates
|
||||
activityLog.entries$.subscribe((entries) => {
|
||||
console.log('Activity log updated:', entries.length, 'entries');
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
.demo-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 600px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
|
||||
padding: 32px;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
${activityLog}
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE PROPERTIES
|
||||
@state()
|
||||
@@ -75,8 +36,10 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
|
||||
|
||||
// STYLES
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
position: relative;
|
||||
|
||||
@@ -16,6 +16,7 @@ import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-ap
|
||||
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';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
// View registry for managing views
|
||||
import { ViewRegistry } from './view.registry.js';
|
||||
@@ -84,23 +85,23 @@ export class DeesAppuiBase extends DeesElement {
|
||||
accessor mainmenuGroups: interfaces.IMenuGroup[] = [];
|
||||
|
||||
@property({ type: Array })
|
||||
accessor mainmenuBottomTabs: interfaces.ITab[] = [];
|
||||
accessor mainmenuBottomTabs: interfaces.IMenuItem[] = [];
|
||||
|
||||
@property({ type: Array })
|
||||
accessor mainmenuTabs: interfaces.ITab[] = [];
|
||||
accessor mainmenuTabs: interfaces.IMenuItem[] = [];
|
||||
|
||||
@property({ type: Object })
|
||||
accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
|
||||
accessor mainmenuSelectedTab: interfaces.IMenuItem | undefined = undefined;
|
||||
|
||||
// Properties for secondarymenu
|
||||
@property({ type: String })
|
||||
accessor secondarymenuHeading: string = '';
|
||||
|
||||
@property({ type: Array })
|
||||
accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
|
||||
accessor secondarymenuGroups: interfaces.IMenuGroup[] = [];
|
||||
|
||||
@property({ type: Object })
|
||||
accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItem | undefined = undefined;
|
||||
accessor secondarymenuSelectedItem: interfaces.IMenuItem | undefined = undefined;
|
||||
|
||||
// Collapse states
|
||||
@property({ type: Boolean })
|
||||
@@ -111,10 +112,10 @@ export class DeesAppuiBase extends DeesElement {
|
||||
|
||||
// Properties for maincontent
|
||||
@property({ type: Array })
|
||||
accessor maincontentTabs: interfaces.ITab[] = [];
|
||||
accessor maincontentTabs: interfaces.IMenuItem[] = [];
|
||||
|
||||
@property({ type: Object })
|
||||
accessor maincontentSelectedTab: interfaces.ITab | undefined = undefined;
|
||||
accessor maincontentSelectedTab: interfaces.IMenuItem | undefined = undefined;
|
||||
|
||||
// References to child components
|
||||
@state()
|
||||
@@ -142,8 +143,10 @@ export class DeesAppuiBase extends DeesElement {
|
||||
private searchCallback: ((query: string) => void) | null = null;
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
|
||||
:host {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@@ -370,12 +373,12 @@ export class DeesAppuiBase extends DeesElement {
|
||||
/**
|
||||
* Add a menu item to a specific group
|
||||
*/
|
||||
public addMainMenuItem(groupName: string, tab: interfaces.ITab): void {
|
||||
public addMainMenuItem(groupName: string, tab: interfaces.IMenuItem): void {
|
||||
this.mainmenuGroups = this.mainmenuGroups.map(group => {
|
||||
if (group.name === groupName) {
|
||||
return {
|
||||
...group,
|
||||
tabs: [...(group.tabs || []), tab],
|
||||
items: [...(group.items || []), tab],
|
||||
};
|
||||
}
|
||||
return group;
|
||||
@@ -390,7 +393,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
if (group.name === groupName) {
|
||||
return {
|
||||
...group,
|
||||
tabs: (group.tabs || []).filter(t => t.key !== tabKey),
|
||||
items: (group.items || []).filter(t => t.key !== tabKey),
|
||||
};
|
||||
}
|
||||
return group;
|
||||
@@ -402,7 +405,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
*/
|
||||
public setMainMenuSelection(tabKey: string): void {
|
||||
for (const group of this.mainmenuGroups) {
|
||||
const tab = group.tabs?.find(t => t.key === tabKey);
|
||||
const tab = group.items?.find(t => t.key === tabKey);
|
||||
if (tab) {
|
||||
this.mainmenuSelectedTab = tab;
|
||||
return;
|
||||
@@ -428,7 +431,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
public setMainMenuBadge(tabKey: string, badge: string | number): void {
|
||||
this.mainmenuGroups = this.mainmenuGroups.map(group => ({
|
||||
...group,
|
||||
tabs: (group.tabs || []).map(tab =>
|
||||
items: (group.items || []).map(tab =>
|
||||
tab.key === tabKey ? { ...tab, badge } : tab
|
||||
),
|
||||
}));
|
||||
@@ -444,7 +447,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
public clearMainMenuBadge(tabKey: string): void {
|
||||
this.mainmenuGroups = this.mainmenuGroups.map(group => ({
|
||||
...group,
|
||||
tabs: (group.tabs || []).map(tab => {
|
||||
items: (group.items || []).map(tab => {
|
||||
if (tab.key === tabKey) {
|
||||
const { badge, ...rest } = tab;
|
||||
return rest;
|
||||
@@ -469,7 +472,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
/**
|
||||
* Set the secondary menu configuration
|
||||
*/
|
||||
public setSecondaryMenu(config: { heading?: string; groups: interfaces.ISecondaryMenuGroup[] }): void {
|
||||
public setSecondaryMenu(config: { heading?: string; groups: interfaces.IMenuGroup[] }): void {
|
||||
if (config.heading !== undefined) {
|
||||
this.secondarymenuHeading = config.heading;
|
||||
}
|
||||
@@ -479,7 +482,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
/**
|
||||
* Update a specific secondary menu group
|
||||
*/
|
||||
public updateSecondaryMenuGroup(groupName: string, update: Partial<interfaces.ISecondaryMenuGroup>): void {
|
||||
public updateSecondaryMenuGroup(groupName: string, update: Partial<interfaces.IMenuGroup>): void {
|
||||
this.secondarymenuGroups = this.secondarymenuGroups.map(group =>
|
||||
group.name === groupName ? { ...group, ...update } : group
|
||||
);
|
||||
@@ -490,7 +493,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
*/
|
||||
public addSecondaryMenuItem(
|
||||
groupName: string,
|
||||
item: interfaces.ISecondaryMenuGroup['items'][0]
|
||||
item: interfaces.IMenuGroup['items'][0]
|
||||
): void {
|
||||
this.secondarymenuGroups = this.secondarymenuGroups.map(group => {
|
||||
if (group.name === groupName) {
|
||||
@@ -532,7 +535,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
/**
|
||||
* Set the content tabs
|
||||
*/
|
||||
public setContentTabs(tabs: interfaces.ITab[]): void {
|
||||
public setContentTabs(tabs: interfaces.IMenuItem[]): void {
|
||||
this.maincontentTabs = [...tabs];
|
||||
if (tabs.length > 0 && !this.maincontentSelectedTab) {
|
||||
this.maincontentSelectedTab = tabs[0];
|
||||
@@ -542,7 +545,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
/**
|
||||
* Add a content tab
|
||||
*/
|
||||
public addContentTab(tab: interfaces.ITab): void {
|
||||
public addContentTab(tab: interfaces.IMenuItem): void {
|
||||
this.maincontentTabs = [...this.maincontentTabs, tab];
|
||||
}
|
||||
|
||||
@@ -569,7 +572,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
/**
|
||||
* Get the currently selected content tab
|
||||
*/
|
||||
public getSelectedContentTab(): interfaces.ITab | undefined {
|
||||
public getSelectedContentTab(): interfaces.IMenuItem | undefined {
|
||||
return this.maincontentSelectedTab;
|
||||
}
|
||||
|
||||
@@ -779,7 +782,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
|
||||
return config.mainMenu.sections.map((section) => ({
|
||||
name: section.name,
|
||||
tabs: section.views
|
||||
items: section.views
|
||||
.map((viewId) => {
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
if (!view) {
|
||||
@@ -791,13 +794,13 @@ export class DeesAppuiBase extends DeesElement {
|
||||
iconName: view.iconName,
|
||||
action: () => this.navigateToView(viewId),
|
||||
badge: view.badge,
|
||||
} as interfaces.ITab;
|
||||
} as interfaces.IMenuItem;
|
||||
})
|
||||
.filter(Boolean) as interfaces.ITab[],
|
||||
.filter(Boolean) as interfaces.IMenuItem[],
|
||||
}));
|
||||
}
|
||||
|
||||
private buildBottomTabsFromItems(items: string[]): interfaces.ITab[] {
|
||||
private buildBottomTabsFromItems(items: string[]): interfaces.IMenuItem[] {
|
||||
return items
|
||||
.map((viewId) => {
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
@@ -809,9 +812,9 @@ export class DeesAppuiBase extends DeesElement {
|
||||
key: view.id,
|
||||
iconName: view.iconName,
|
||||
action: () => this.navigateToView(viewId),
|
||||
} as interfaces.ITab;
|
||||
} as interfaces.IMenuItem;
|
||||
})
|
||||
.filter(Boolean) as interfaces.ITab[];
|
||||
.filter(Boolean) as interfaces.IMenuItem[];
|
||||
}
|
||||
|
||||
private async loadView(
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import '../dees-appui-tabs/dees-appui-tabs.js';
|
||||
import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
@customElement('dees-appui-maincontent')
|
||||
export class DeesAppuiMaincontent extends DeesElement {
|
||||
@@ -35,16 +36,18 @@ export class DeesAppuiMaincontent extends DeesElement {
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
accessor tabs: interfaces.ITab[] = [
|
||||
accessor tabs: interfaces.IMenuItem[] = [
|
||||
{ key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
|
||||
];
|
||||
|
||||
@property({ type: Object })
|
||||
accessor selectedTab: interfaces.ITab | null = null;
|
||||
accessor selectedTab: interfaces.IMenuItem | null = null;
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
display: block;
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
} from '@design.estate/dees-element';
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
import { demoFunc } from './dees-appui-mainmenu.demo.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
/**
|
||||
* the most left menu
|
||||
@@ -37,21 +38,23 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
|
||||
// Bottom tabs (pinned to bottom)
|
||||
@property({ type: Array })
|
||||
accessor bottomTabs: interfaces.ITab[] = [];
|
||||
accessor bottomTabs: interfaces.IMenuItem[] = [];
|
||||
|
||||
// Legacy tabs property (for backward compatibility)
|
||||
@property({ type: Array })
|
||||
accessor tabs: interfaces.ITab[] = [];
|
||||
accessor tabs: interfaces.IMenuItem[] = [];
|
||||
|
||||
@property()
|
||||
accessor selectedTab: interfaces.ITab;
|
||||
accessor selectedTab: interfaces.IMenuItem;
|
||||
|
||||
@property({ type: Boolean, reflect: true })
|
||||
accessor collapsed: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
|
||||
:host {
|
||||
--menu-width-expanded: 200px;
|
||||
--menu-width-collapsed: 56px;
|
||||
@@ -390,7 +393,7 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
<div class="menuGroup">
|
||||
${group.name ? html`<div class="groupHeader">${group.name}</div>` : ''}
|
||||
<div class="groupTabs">
|
||||
${group.tabs.map((tabArg) => this.renderTab(tabArg))}
|
||||
${group.items.map((tabArg) => this.renderTab(tabArg))}
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
@@ -407,7 +410,7 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTab(tabArg: interfaces.ITab): TemplateResult {
|
||||
private renderTab(tabArg: interfaces.IMenuItem): TemplateResult {
|
||||
return html`
|
||||
<div
|
||||
class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
|
||||
@@ -422,15 +425,15 @@ export class DeesAppuiMainmenu extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private getAllTabs(): interfaces.ITab[] {
|
||||
private getAllTabs(): interfaces.IMenuItem[] {
|
||||
if (this.menuGroups.length > 0) {
|
||||
const groupTabs = this.menuGroups.flatMap(group => group.tabs);
|
||||
const groupTabs = this.menuGroups.flatMap(group => group.items);
|
||||
return [...groupTabs, ...this.bottomTabs];
|
||||
}
|
||||
return [...this.tabs, ...this.bottomTabs];
|
||||
}
|
||||
|
||||
updateTab(tabArg: interfaces.ITab) {
|
||||
updateTab(tabArg: interfaces.IMenuItem) {
|
||||
this.selectedTab = tabArg;
|
||||
this.selectedTab.action();
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
cssManager,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
@customElement('dees-appui-profiledropdown')
|
||||
export class DeesAppuiProfileDropdown extends DeesElement {
|
||||
@@ -53,8 +54,10 @@ export class DeesAppuiProfileDropdown extends DeesElement {
|
||||
accessor position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
import { html, cssManager } from '@design.estate/dees-element';
|
||||
import * as interfaces from '../../interfaces/index.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
const horizontalTabs: interfaces.IMenuItem[] = [
|
||||
{ key: 'Home', iconName: 'lucide:home', action: () => console.log('Home clicked') },
|
||||
{ key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => console.log('Analytics clicked') },
|
||||
{ key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports clicked') },
|
||||
{ key: 'User Settings', iconName: 'lucide:settings', action: () => console.log('Settings clicked') },
|
||||
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help clicked') },
|
||||
];
|
||||
|
||||
const verticalTabs: interfaces.IMenuItem[] = [
|
||||
{ key: 'Profile', iconName: 'lucide:user', action: () => console.log('Profile clicked') },
|
||||
{ key: 'Security', iconName: 'lucide:shield', action: () => console.log('Security clicked') },
|
||||
{ key: 'Notifications', iconName: 'lucide:bell', action: () => console.log('Notifications clicked') },
|
||||
{ key: 'Integrations', iconName: 'lucide:link', action: () => console.log('Integrations clicked') },
|
||||
{ key: 'Advanced', iconName: 'lucide:code', action: () => console.log('Advanced clicked') },
|
||||
];
|
||||
|
||||
const noIndicatorTabs: interfaces.IMenuItem[] = [
|
||||
{ key: 'All', action: () => console.log('All clicked') },
|
||||
{ key: 'Active', action: () => console.log('Active clicked') },
|
||||
{ key: 'Completed', action: () => console.log('Completed clicked') },
|
||||
{ key: 'Archived', action: () => console.log('Archived clicked') },
|
||||
];
|
||||
|
||||
const demoContent = (text: string) => html`
|
||||
<div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
|
||||
${text}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return html`
|
||||
<style>
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
padding: 48px;
|
||||
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#18181b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
|
||||
.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<div class="section">
|
||||
<div class="section-title">Horizontal Tabs with Animated Indicator</div>
|
||||
<dees-appui-tabs .tabs=${horizontalTabs}>
|
||||
${demoContent('Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.')}
|
||||
</dees-appui-tabs>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Vertical Tabs Layout</div>
|
||||
<div class="two-column">
|
||||
<dees-appui-tabs .tabStyle=${'vertical'} .tabs=${verticalTabs}></dees-appui-tabs>
|
||||
${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Without Indicator</div>
|
||||
<dees-appui-tabs .showTabIndicator=${false} .tabs=${noIndicatorTabs}>
|
||||
${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
|
||||
</dees-appui-tabs>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@@ -11,106 +11,21 @@ import {
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { demoFunc } from './dees-appui-tabs.demo.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
@customElement('dees-appui-tabs')
|
||||
export class DeesAppuiTabs extends DeesElement {
|
||||
public static demo = () => {
|
||||
const horizontalTabs: interfaces.ITab[] = [
|
||||
{ key: 'Home', iconName: 'lucide:home', action: () => console.log('Home clicked') },
|
||||
{ key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => console.log('Analytics clicked') },
|
||||
{ key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports clicked') },
|
||||
{ key: 'User Settings', iconName: 'lucide:settings', action: () => console.log('Settings clicked') },
|
||||
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help clicked') },
|
||||
];
|
||||
|
||||
const verticalTabs: interfaces.ITab[] = [
|
||||
{ key: 'Profile', iconName: 'lucide:user', action: () => console.log('Profile clicked') },
|
||||
{ key: 'Security', iconName: 'lucide:shield', action: () => console.log('Security clicked') },
|
||||
{ key: 'Notifications', iconName: 'lucide:bell', action: () => console.log('Notifications clicked') },
|
||||
{ key: 'Integrations', iconName: 'lucide:link', action: () => console.log('Integrations clicked') },
|
||||
{ key: 'Advanced', iconName: 'lucide:code', action: () => console.log('Advanced clicked') },
|
||||
];
|
||||
|
||||
const noIndicatorTabs: interfaces.ITab[] = [
|
||||
{ key: 'All', action: () => console.log('All clicked') },
|
||||
{ key: 'Active', action: () => console.log('Active clicked') },
|
||||
{ key: 'Completed', action: () => console.log('Completed clicked') },
|
||||
{ key: 'Archived', action: () => console.log('Archived clicked') },
|
||||
];
|
||||
|
||||
const demoContent = (text: string) => html`
|
||||
<div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
|
||||
${text}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return html`
|
||||
<style>
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
padding: 48px;
|
||||
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#18181b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
|
||||
.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<div class="section">
|
||||
<div class="section-title">Horizontal Tabs with Animated Indicator</div>
|
||||
<dees-appui-tabs .tabs=${horizontalTabs}>
|
||||
${demoContent('Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.')}
|
||||
</dees-appui-tabs>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Vertical Tabs Layout</div>
|
||||
<div class="two-column">
|
||||
<dees-appui-tabs .tabStyle=${'vertical'} .tabs=${verticalTabs}></dees-appui-tabs>
|
||||
${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Without Indicator</div>
|
||||
<dees-appui-tabs .showTabIndicator=${false} .tabs=${noIndicatorTabs}>
|
||||
${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
|
||||
</dees-appui-tabs>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
accessor tabs: interfaces.ITab[] = [];
|
||||
accessor tabs: interfaces.IMenuItem[] = [];
|
||||
|
||||
@property({ type: Object })
|
||||
accessor selectedTab: interfaces.ITab | null = null;
|
||||
accessor selectedTab: interfaces.IMenuItem | null = null;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor showTabIndicator: boolean = true;
|
||||
@@ -119,8 +34,10 @@ export class DeesAppuiTabs extends DeesElement {
|
||||
accessor tabStyle: 'horizontal' | 'vertical' = 'horizontal';
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -312,7 +229,7 @@ export class DeesAppuiTabs extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTab(tab: interfaces.ITab, isHorizontal: boolean): TemplateResult {
|
||||
private renderTab(tab: interfaces.IMenuItem, isHorizontal: boolean): TemplateResult {
|
||||
const isSelected = tab === this.selectedTab;
|
||||
const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
|
||||
|
||||
@@ -336,11 +253,11 @@ export class DeesAppuiTabs extends DeesElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTabIcon(tab: interfaces.ITab): TemplateResult | '' {
|
||||
private renderTabIcon(tab: interfaces.IMenuItem): TemplateResult | '' {
|
||||
return tab.iconName ? html`<dees-icon .icon=${tab.iconName}></dees-icon>` : '';
|
||||
}
|
||||
|
||||
private selectTab(tabArg: interfaces.ITab) {
|
||||
private selectTab(tabArg: interfaces.IMenuItem) {
|
||||
this.selectedTab = tabArg;
|
||||
tabArg.action();
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
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>
|
||||
`;
|
||||
@@ -13,9 +13,14 @@ import {
|
||||
|
||||
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 IAppViewTab extends interfaces.ITab {
|
||||
export interface IViewTab extends interfaces.IMenuItem {
|
||||
content?: TemplateResult | (() => TemplateResult);
|
||||
useSlotName?: boolean;
|
||||
slotName?: string;
|
||||
paddingPx?: number;
|
||||
}
|
||||
|
||||
export interface IAppView {
|
||||
@@ -23,54 +28,32 @@ export interface IAppView {
|
||||
name: string;
|
||||
description?: string;
|
||||
iconName?: string;
|
||||
tabs: IAppViewTab[];
|
||||
menuItems?: interfaces.ISelectionOption[];
|
||||
tabs: IViewTab[];
|
||||
menuItems?: interfaces.IMenuItem[];
|
||||
}
|
||||
|
||||
@customElement('dees-appui-view')
|
||||
export class DeesAppuiView extends DeesElement {
|
||||
public static demo = () => 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>
|
||||
`;
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Object })
|
||||
accessor viewConfig: IAppView;
|
||||
|
||||
@state()
|
||||
accessor selectedTab: IAppViewTab | null = null;
|
||||
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;
|
||||
@@ -138,9 +121,14 @@ export class DeesAppuiView extends DeesElement {
|
||||
${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' : ''}">
|
||||
${content || html`<slot name="${tab.key}"></slot>`}
|
||||
<div class="tab-content ${isActive ? 'active' : ''}" style="padding: ${padding}px;">
|
||||
${content
|
||||
? content
|
||||
: tab.useSlotName
|
||||
? html`<slot name="${tab.slotName || tab.key}"></slot>`
|
||||
: ''}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
@@ -182,11 +170,11 @@ export class DeesAppuiView extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
public getMenuItems(): interfaces.ISelectionOption[] {
|
||||
public getMenuItems(): interfaces.IMenuItem[] {
|
||||
return this.viewConfig?.menuItems || [];
|
||||
}
|
||||
|
||||
public getTabs(): IAppViewTab[] {
|
||||
public getTabs(): IViewTab[] {
|
||||
return this.viewConfig?.tabs || [];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user