feat: add header position support to dockview group panel

packages/dockview-core/src/dockview/components/tab/defaultTab.scss

@@ -57,6 +57,7 @@
     .dv-default-tab {
         position: relative;
         height: 100%;
+        width: 100%;
         display: flex;
         align-items: center;
         white-space: nowrap;

packages/dockview-core/src/dockview/components/titlebar/tabs.scss

@@ -4,7 +4,15 @@
     overflow: auto;
     scrollbar-width: thin; // firefox
 
-    &.dv-horizontal {
+    &.dv-tabs-container-vertical {
+        width: 100%;
+        height: fit-content;
+        max-height: 100%;
+        writing-mode: vertical-rl;
+    }
+
+    &.dv-horizontal,
+    &.dv-vertical {
         .dv-tab {
             &:not(:first-child)::before {
                 content: ' ';
@@ -14,11 +22,26 @@
                 z-index: 5;
                 pointer-events: none;
                 background-color: var(--dv-tab-divider-color);
+            }
+        }
+    }
+
+    &.dv-horizontal {
+        .dv-tab {
+            &:not(:first-child)::before {
                 width: 1px;
                 height: 100%;
             }
         }
     }
+    &.dv-vertical {
+        .dv-tab {
+            &:not(:first-child)::before {
+                width: 100%;
+                height: 1px;
+            }
+        }
+    }
 
     &::-webkit-scrollbar {
         height: 3px;
@@ -33,6 +56,7 @@
     &::-webkit-scrollbar-thumb {
         background: var(--dv-tabs-container-scrollbar-color);
     }
+
 }
 
 .dv-scrollable {
@@ -52,6 +76,12 @@
     margin: var(--dv-tab-margin);
 }
 
+.dv-tabs-container-vertical {
+    .dv-tab {
+        padding: 0.5rem 0.25rem;
+    }
+}
+
 .dv-tabs-overflow-container {
     flex-direction: column;
     height: unset;

packages/dockview-core/src/dockview/components/titlebar/tabs.ts

@@ -1,7 +1,9 @@
 import { getPanelData } from '../../../dnd/dataTransfer';
 import {
+  addClasses,
     isChildEntirelyVisibleWithinParent,
     OverflowObserver,
+    removeClasses,
 } from '../../../dom';
 import { addDisposableListener, Emitter, Event } from '../../../events';
 import {
@@ -15,17 +17,20 @@ import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
 import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
+import { IHeaderDirection } from '../../options';
 import { Tab } from '../tab/tab';
 import { TabDragEvent, TabDropIndexEvent } from './tabsContainer';
 
 export class Tabs extends CompositeDisposable {
     private readonly _element: HTMLElement;
     private readonly _tabsList: HTMLElement;
     private readonly _observerDisposable = new MutableDisposable();
+    private readonly _scrollbar: Scrollbar | null = null;
 
     private _tabs: IValueDisposable<Tab>[] = [];
     private selectedIndex = -1;
     private _showTabsOverflowControl = false;
+    private _direction: IHeaderDirection = 'horizontal';
 
     private readonly _onTabDragStart = new Emitter<TabDragEvent>();
     readonly onTabDragStart: Event<TabDragEvent> = this._onTabDragStart.event;
@@ -87,6 +92,28 @@ export class Tabs extends CompositeDisposable {
         return this._tabs.map((_) => _.value);
     }
 
+    get direction(): IHeaderDirection {
+        return this._direction;
+    }
+
+    set direction(value: IHeaderDirection) {
+        if(this._direction === value) {
+            return;
+        }
+
+        this._direction = value;
+        if(this._scrollbar) {
+            this._scrollbar.orientation = value;
+        }
+        removeClasses(this._tabsList, 'dv-horizontal', 'dv-vertical');
+        if(value === 'vertical') {
+            addClasses(this._tabsList, 'dv-tabs-container-vertical', 'dv-vertical');
+        } else {
+            removeClasses(this._tabsList, 'dv-tabs-container-vertical');
+            addClasses(this._tabsList, 'dv-horizontal');
+        }
+    }
+
     constructor(
         private readonly group: DockviewGroupPanel,
         private readonly accessor: DockviewComponent,
@@ -97,16 +124,17 @@ export class Tabs extends CompositeDisposable {
         super();
 
         this._tabsList = document.createElement('div');
-        this._tabsList.className = 'dv-tabs-container dv-horizontal';
+        this._tabsList.className = 'dv-tabs-container';
 
         this.showTabsOverflowControl = options.showTabsOverflowControl;
 
         if (accessor.options.scrollbars === 'native') {
             this._element = this._tabsList;
         } else {
-            const scrollbar = new Scrollbar(this._tabsList);
-            this._element = scrollbar.element;
-            this.addDisposables(scrollbar);
+            this._scrollbar = new Scrollbar(this._tabsList);
+            this._scrollbar.orientation = this.direction
+            this._element = this._scrollbar.element;
+            this.addDisposables(this._scrollbar);
         }
 
         this.addDisposables(

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss

@@ -33,5 +33,15 @@
 
     .dv-right-actions-container {
         display: flex;
+
+        &.dv-right-actions-container-vertical {
+            flex-direction: column;
+        }
+    }
+
+    &.dv-groupview-header-vertical {
+        flex-direction: column;
+        height: auto;
+        width: var(--dv-tabs-and-actions-container-height);
     }
 }

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts

@@ -8,7 +8,7 @@ import { addDisposableListener, Emitter, Event } from '../../../events';
 import { Tab } from '../tab/tab';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { VoidContainer } from './voidContainer';
-import { findRelativeZIndexParent, toggleClass } from '../../../dom';
+import { addClasses, findRelativeZIndexParent, removeClasses, toggleClass } from '../../../dom';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
 import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
@@ -18,6 +18,7 @@ import {
     createDropdownElementHandle,
     DropdownElement,
 } from './tabOverflowControl';
+import { IHeaderDirection } from '../../options';
 
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
@@ -43,6 +44,7 @@ export interface ITabsContainer extends IDisposable {
     readonly onGroupDragStart: Event<GroupDragEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
     hidden: boolean;
+    direction: IHeaderDirection;
     delete(id: string): void;
     indexOf(id: string): number;
     setActive(isGroupActive: boolean): void;
@@ -73,6 +75,7 @@ export class TabsContainer
     private preActions: HTMLElement | undefined;
 
     private _hidden = false;
+    private _direction: IHeaderDirection = 'horizontal';
 
     private dropdownPart: DropdownElement | null = null;
     private _overflowTabs: string[] = [];
@@ -111,6 +114,23 @@ export class TabsContainer
         this.element.style.display = value ? 'none' : '';
     }
 
+    get direction(): IHeaderDirection {
+        return this._direction;
+    }
+
+    set direction(value: IHeaderDirection) {
+        this._direction = value;
+        if(value === 'vertical') {
+          addClasses(this._element, 'dv-groupview-header-vertical');
+          addClasses(this.rightActionsContainer, 'dv-right-actions-container-vertical');
+          this.tabs.direction = value;
+        } else {
+          removeClasses(this._element, 'dv-groupview-header-vertical');
+          removeClasses(this.rightActionsContainer, 'dv-right-actions-container-vertical');
+          this.tabs.direction = value;
+        }
+    }
+
     get element(): HTMLElement {
         return this._element;
     }

packages/dockview-core/src/dockview/dockviewGroupPanel.scss

@@ -1,9 +1,9 @@
 .dv-groupview {
     display: flex;
-    flex-direction: column;
     height: 100%;
     background-color: var(--dv-group-view-background-color);
     overflow: hidden;
+    flex-direction: column;
 
     &:focus {
         outline: none;
@@ -14,4 +14,16 @@
         min-height: 0;
         outline: none;
     }
+
+    &.dv-groupview-header-bottom {
+        flex-direction: column-reverse;
+    }
+
+    &.dv-groupview-header-left {
+        flex-direction: row;
+    }
+
+    &.dv-groupview-header-right {
+        flex-direction: row-reverse;
+    }
 }

packages/dockview-core/src/dockview/dockviewGroupPanel.ts

@@ -13,6 +13,7 @@ import {
     DockviewGroupPanelApi,
     DockviewGroupPanelApiImpl,
 } from '../api/dockviewGroupPanelApi';
+import { IHeaderPosition } from './options';
 
 const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
 const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
@@ -21,6 +22,7 @@ export interface IDockviewGroupPanel
     extends IGridviewPanel<DockviewGroupPanelApi> {
     model: IDockviewGroupPanelModel;
     locked: DockviewGroupPanelLocked;
+    headerPosition: IHeaderPosition;
     readonly size: number;
     readonly panels: IDockviewPanel[];
     readonly activePanel: IDockviewPanel | undefined;
@@ -94,6 +96,13 @@ export class DockviewGroupPanel
         return this._model.header;
     }
 
+    get headerPosition(): IHeaderPosition {
+        return this._model.headerPosition;
+    }
+    set headerPosition(value: IHeaderPosition) {
+        this._model.headerPosition = value;
+    }
+
     constructor(
         accessor: DockviewComponent,
         id: string,