- Click the X button on tabs to close them. The "Main" tab is not closeable.
+ Click the X button on tabs to close them. Use the + button to add tabs and the trash button to clear all.
Current tabs: ${this.tabs.length}
`;
@@ -232,6 +224,16 @@ export const demoFunc = () => {
{ key: 'Archived', action: () => console.log('Archived clicked') },
];
+ const actionsLeft: interfaces.ITabAction[] = [
+ { id: 'back', iconName: 'lucide:arrowLeft', action: () => console.log('Back'), tooltip: 'Go Back' },
+ ];
+
+ const actionsRight: interfaces.ITabAction[] = [
+ { id: 'add', iconName: 'lucide:plus', action: () => console.log('Add tab'), tooltip: 'New Tab' },
+ { id: 'search', iconName: 'lucide:search', action: () => console.log('Search'), tooltip: 'Search Tabs' },
+ { id: 'disabled', iconName: 'lucide:lock', action: () => {}, tooltip: 'Disabled Action', disabled: true },
+ ];
+
const demoContent = (text: string) => html`
-
Closeable Tabs (Browser-style)
+
Tabs with Action Buttons
+
+ ${demoContent('Action buttons can be placed on either side of the tab bar. They remain fixed while tabs scroll. The lock icon shows a disabled action.')}
+
-
-
- ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+ ${hasLeftActions ? this.renderActions(this.actionsLeft, 'left') : ''}
+
-
+ ${hasRightActions ? this.renderActions(this.actionsRight, 'right') : ''}
${this.showTabIndicator ? html`
` : ''}
`;
@@ -353,6 +438,22 @@ export class DeesAppuiTabs extends DeesElement {
`;
}
+ private renderActions(actions: interfaces.ITabAction[], position: 'left' | 'right'): TemplateResult {
+ return html`
+
+ ${actions.map(action => html`
+
!action.disabled && action.action()}
+ >
+
+
+ `)}
+
+ `;
+ }
+
private renderTab(tab: interfaces.IMenuItem, isHorizontal: boolean): TemplateResult {
const isSelected = tab === this.selectedTab;
const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
@@ -406,6 +507,14 @@ export class DeesAppuiTabs extends DeesElement {
}));
}
+ /**
+ * Clear all tabs and reset selection.
+ */
+ public clear(): void {
+ this.tabs = [];
+ this.selectedTab = null;
+ }
+
private closeTab(e: Event, tab: interfaces.IMenuItem) {
e.stopPropagation(); // Don't select tab when closing
@@ -423,14 +532,9 @@ export class DeesAppuiTabs extends DeesElement {
}
firstUpdated() {
- if (this.tabs && this.tabs.length > 0) {
- this.selectTab(this.tabs[0]);
- }
-
- // Set up ResizeObserver for scroll state updates
+ // Tab selection is handled by updated() lifecycle
this.setupResizeObserver();
- // Initial scroll state check
requestAnimationFrame(() => {
this.updateScrollState();
});
@@ -503,8 +607,24 @@ export class DeesAppuiTabs extends DeesElement {
async updated(changedProperties: Map
) {
super.updated(changedProperties);
- if (changedProperties.has('tabs') && this.tabs && this.tabs.length > 0 && !this.selectedTab) {
- this.selectTab(this.tabs[0]);
+ if (changedProperties.has('tabs')) {
+ if (!this.tabs || this.tabs.length === 0) {
+ // Tabs are empty => reset selection
+ if (this.selectedTab !== null) {
+ this.selectedTab = null;
+ this.dispatchEvent(new CustomEvent('tab-select', {
+ detail: { tab: null },
+ bubbles: true,
+ composed: true,
+ }));
+ }
+ } else if (this.selectedTab && !this.tabs.includes(this.selectedTab)) {
+ // Selected tab was removed => select first available
+ this.selectTab(this.tabs[0]);
+ } else if (!this.selectedTab) {
+ // Tabs exist but nothing selected => select first
+ this.selectTab(this.tabs[0]);
+ }
}
if (changedProperties.has('selectedTab') || changedProperties.has('tabs')) {
diff --git a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
index 84a64cb..ae4740e 100644
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
@@ -143,6 +143,12 @@ export class DeesAppui extends DeesElement {
@property({ type: Object })
accessor maincontentSelectedTab: interfaces.IMenuItem | undefined = undefined;
+ @property({ type: Array })
+ accessor contentTabActionsLeft: interfaces.ITabAction[] = [];
+
+ @property({ type: Array })
+ accessor contentTabActionsRight: interfaces.ITabAction[] = [];
+
// References to child components
@state()
accessor appbar: DeesAppuiBar | undefined = undefined;
@@ -306,6 +312,8 @@ export class DeesAppui extends DeesElement {
.showTabs=${this.maincontentTabsVisible}
.tabsAutoHide=${this.contentTabsAutoHide}
.tabsAutoHideThreshold=${this.contentTabsAutoHideThreshold}
+ .tabActionsLeft=${this.contentTabActionsLeft}
+ .tabActionsRight=${this.contentTabActionsRight}
@tab-select=${(e: CustomEvent) => this.handleContentTabSelect(e)}
@tab-close=${(e: CustomEvent) => this.handleContentTabClose(e)}
>
@@ -699,6 +707,20 @@ export class DeesAppui extends DeesElement {
return this.maincontentSelectedTab;
}
+ /**
+ * Set content tab action buttons on the left side
+ */
+ public setContentTabActionsLeft(actions: interfaces.ITabAction[]): void {
+ this.contentTabActionsLeft = [...actions];
+ }
+
+ /**
+ * Set content tab action buttons on the right side
+ */
+ public setContentTabActionsRight(actions: interfaces.ITabAction[]): void {
+ this.contentTabActionsRight = [...actions];
+ }
+
// ==========================================
// PROGRAMMATIC API: ACTIVITY LOG
// ==========================================
diff --git a/ts_web/elements/interfaces/appconfig.ts b/ts_web/elements/interfaces/appconfig.ts
index 94ee00e..b5d7078 100644
--- a/ts_web/elements/interfaces/appconfig.ts
+++ b/ts_web/elements/interfaces/appconfig.ts
@@ -1,6 +1,6 @@
import type { TemplateResult } from '@design.estate/dees-element';
import type { IAppBarMenuItem } from './appbarmenuitem.js';
-import type { IMenuItem } from './tab.js';
+import type { IMenuItem, ITabAction } from './tab.js';
import type { IMenuGroup } from './menugroup.js';
import type { ISecondaryMenuGroup, ISecondaryMenuItem } from './secondarymenu.js';
@@ -134,6 +134,8 @@ export type TDeesAppui = HTMLElement & {
removeContentTab: (tabKey: string) => void;
selectContentTab: (tabKey: string) => void;
getSelectedContentTab: () => IMenuItem | undefined;
+ setContentTabActionsLeft: (actions: ITabAction[]) => void;
+ setContentTabActionsRight: (actions: ITabAction[]) => void;
activityLog: IActivityLogAPI;
setActivityLogVisible: (visible: boolean) => void;
toggleActivityLog: () => void;
diff --git a/ts_web/elements/interfaces/tab.ts b/ts_web/elements/interfaces/tab.ts
index 717b84b..31a942d 100644
--- a/ts_web/elements/interfaces/tab.ts
+++ b/ts_web/elements/interfaces/tab.ts
@@ -7,3 +7,11 @@ export interface IMenuItem {
closeable?: boolean;
onClose?: () => void;
}
+
+export interface ITabAction {
+ id: string;
+ iconName: string;
+ action: () => void | Promise;
+ tooltip?: string;
+ disabled?: boolean;
+}