dockview-core 4.13.1 → 5.0.0

package/README.md

@@ -1,22 +1,22 @@
 <div align="center">
-<h1>dockview</h1>
+<h1>dockview-core</h1>
 
-<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue and Vanilla TypeScript</p>
+<p>Framework-agnostic core layout engine — zero dependencies, vanilla TypeScript. Supports tabs, groups, grids and splitviews</p>
 
 </div>
 
 ---
 
-[![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
-[![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview)
+[![npm version](https://badge.fury.io/js/dockview-core.svg)](https://www.npmjs.com/package/dockview-core)
+[![npm](https://img.shields.io/npm/dm/dockview-core)](https://www.npmjs.com/package/dockview-core)
 [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
-[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview)
+[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview-core)](https://bundlephobia.com/result?p=dockview-core)
 
 ##
 
-![](packages/docs/static/img/splashscreen.gif)
+![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreen.gif?raw=true)
 
 Please see the website: https://dockview.dev
 
@@ -33,6 +33,54 @@ Please see the website: https://dockview.dev
 -   High test coverage
 -   Documentation website with live examples
 -   Transparent builds and Code Analysis
--   Security at mind - verifed publishing and builds through GitHub Actions
+-   Security at mind - verified publishing and builds through GitHub Actions
 
-Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
+## Quick Start
+
+Install from [npm](https://www.npmjs.com/package/dockview-core):
+
+```
+npm install dockview-core
+```
+
+Import the stylesheet:
+
+```css
+@import 'dockview-core/dist/styles/dockview.css';
+```
+
+Create a dockview instance:
+
+```ts
+import { DockviewComponent } from 'dockview-core';
+
+const element = document.getElementById('app');
+
+const dockview = new DockviewComponent(element, {
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'my-component':
+                return {
+                    init: (params) => {
+                        params.containerElement.textContent = 'Hello World';
+                    },
+                };
+        }
+    },
+});
+
+dockview.addPanel({
+    id: 'panel_1',
+    component: 'my-component',
+});
+```
+
+Apply a theme to a parent element:
+
+```html
+<div id="app" class="dockview-theme-dark" style="height: 400px;"></div>
+```
+
+See the [documentation](https://dockview.dev) for full examples.
+
+Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview-core#Provenance).

package/dist/cjs/api/dockviewGroupPanelApi.d.ts

@@ -2,6 +2,7 @@ import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
+import { DockviewHeaderPosition } from '../dockview/options';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl, SizeEvent } from './gridviewPanelApi';
 export interface DockviewGroupMoveParams {
@@ -25,6 +26,8 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
      */
     getWindow(): Window;
     moveTo(options: DockviewGroupMoveParams): void;
+    setHeaderPosition(position: DockviewHeaderPosition): void;
+    getHeaderPosition(): DockviewHeaderPosition;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -46,6 +49,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     setSize(event: SizeEvent): void;
     close(): void;
     getWindow(): Window;
+    setHeaderPosition(position: DockviewHeaderPosition): void;
+    getHeaderPosition(): DockviewHeaderPosition;
     moveTo(options: DockviewGroupMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;

package/dist/cjs/api/dockviewGroupPanelApi.js

@@ -76,6 +76,18 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
             ? this.location.getWindow()
             : window;
     };
+    DockviewGroupPanelApiImpl.prototype.setHeaderPosition = function (position) {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        this._group.model.headerPosition = position;
+    };
+    DockviewGroupPanelApiImpl.prototype.getHeaderPosition = function () {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        return this._group.model.headerPosition;
+    };
     DockviewGroupPanelApiImpl.prototype.moveTo = function (options) {
         var _a, _b, _c, _d;
         if (!this._group) {
@@ -90,7 +102,7 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
             to: {
                 group: group,
                 position: options.group
-                    ? (_d = options.position) !== null && _d !== void 0 ? _d : 'center'
+                    ? ((_d = options.position) !== null && _d !== void 0 ? _d : 'center')
                     : 'center',
                 index: options.index,
             },

package/dist/cjs/api/dockviewPanelApi.js

@@ -106,7 +106,7 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
             to: {
                 group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
                 position: options.group
-                    ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
+                    ? ((_b = options.position) !== null && _b !== void 0 ? _b : 'center')
                     : 'center',
                 index: options.index,
             },

package/dist/cjs/constants.js

@@ -2,5 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DESERIALIZATION_POPOUT_DELAY_MS = exports.DEFAULT_FLOATING_GROUP_POSITION = exports.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = void 0;
 exports.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
-exports.DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+exports.DEFAULT_FLOATING_GROUP_POSITION = {
+    left: 100,
+    top: 100,
+    width: 300,
+    height: 300,
+};
 exports.DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/cjs/dnd/abstractDragHandler.js

@@ -42,7 +42,9 @@ var DragHandler = /** @class */ (function (_super) {
     DragHandler.prototype.configure = function () {
         var _this = this;
         this.addDisposables(this._onDragStart, (0, events_1.addDisposableListener)(this.el, 'dragstart', function (event) {
-            if (event.defaultPrevented || _this.isCancelled(event) || _this.disabled) {
+            if (event.defaultPrevented ||
+                _this.isCancelled(event) ||
+                _this.disabled) {
                 event.preventDefault();
                 return;
             }

package/dist/cjs/dnd/droptarget.js

@@ -58,10 +58,10 @@ function checkBoundsChanged(element, bounds) {
     var widthPx = "".concat(Math.round(width), "px");
     var heightPx = "".concat(Math.round(height), "px");
     // Check if position or size changed (back to traditional method)
-    return element.style.top !== topPx ||
+    return (element.style.top !== topPx ||
         element.style.left !== leftPx ||
         element.style.width !== widthPx ||
-        element.style.height !== heightPx;
+        element.style.height !== heightPx);
 }
 var WillShowOverlayEvent = /** @class */ (function (_super) {
     __extends(WillShowOverlayEvent, _super);

package/dist/cjs/dockview/components/popupService.js

@@ -64,6 +64,8 @@ var PopupService = /** @class */ (function (_super) {
                 return; // clicked within popover
             }
             _this.close();
+        }), (0, events_1.addDisposableListener)(window, 'resize', function () {
+            _this.close();
         }));
         requestAnimationFrame(function () {
             (0, dom_1.shiftAbsoluteElementIntoView)(wrapper, _this.root);

package/dist/cjs/dockview/components/titlebar/tabs.d.ts

@@ -4,6 +4,7 @@ import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewHeaderDirection } from '../../options';
 import { Tab } from '../tab/tab';
 import { TabDragEvent, TabDropIndexEvent } from './tabsContainer';
 export declare class Tabs extends CompositeDisposable {
@@ -12,9 +13,11 @@ export declare class Tabs extends CompositeDisposable {
     private readonly _element;
     private readonly _tabsList;
     private readonly _observerDisposable;
+    private readonly _scrollbar;
     private _tabs;
     private selectedIndex;
     private _showTabsOverflowControl;
+    private _direction;
     private readonly _onTabDragStart;
     readonly onTabDragStart: Event<TabDragEvent>;
     private readonly _onDrop;
@@ -32,6 +35,8 @@ export declare class Tabs extends CompositeDisposable {
     get panels(): string[];
     get size(): number;
     get tabs(): Tab[];
+    get direction(): DockviewHeaderDirection;
+    set direction(value: DockviewHeaderDirection);
     constructor(group: DockviewGroupPanel, accessor: DockviewComponent, options: {
         showTabsOverflowControl: boolean;
     });

package/dist/cjs/dockview/components/titlebar/tabs.js

@@ -66,9 +66,11 @@ var Tabs = /** @class */ (function (_super) {
         _this.group = group;
         _this.accessor = accessor;
         _this._observerDisposable = new lifecycle_1.MutableDisposable();
+        _this._scrollbar = null;
         _this._tabs = [];
         _this.selectedIndex = -1;
         _this._showTabsOverflowControl = false;
+        _this._direction = 'horizontal';
         _this._onTabDragStart = new events_1.Emitter();
         _this.onTabDragStart = _this._onTabDragStart.event;
         _this._onDrop = new events_1.Emitter();
@@ -78,15 +80,16 @@ var Tabs = /** @class */ (function (_super) {
         _this._onOverflowTabsChange = new events_1.Emitter();
         _this.onOverflowTabsChange = _this._onOverflowTabsChange.event;
         _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 {
-            var scrollbar = new scrollbar_1.Scrollbar(_this._tabsList);
-            _this._element = scrollbar.element;
-            _this.addDisposables(scrollbar);
+            _this._scrollbar = new scrollbar_1.Scrollbar(_this._tabsList);
+            _this._scrollbar.orientation = _this.direction;
+            _this._element = _this._scrollbar.element;
+            _this.addDisposables(_this._scrollbar);
         }
         _this.addDisposables(_this._onOverflowTabsChange, _this._observerDisposable, _this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, (0, events_1.addDisposableListener)(_this.element, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
@@ -167,6 +170,30 @@ var Tabs = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Tabs.prototype, "direction", {
+        get: function () {
+            return this._direction;
+        },
+        set: function (value) {
+            if (this._direction === value) {
+                return;
+            }
+            this._direction = value;
+            if (this._scrollbar) {
+                this._scrollbar.orientation = value;
+            }
+            (0, dom_1.removeClasses)(this._tabsList, 'dv-horizontal', 'dv-vertical');
+            if (value === 'vertical') {
+                (0, dom_1.addClasses)(this._tabsList, 'dv-tabs-container-vertical', 'dv-vertical');
+            }
+            else {
+                (0, dom_1.removeClasses)(this._tabsList, 'dv-tabs-container-vertical');
+                (0, dom_1.addClasses)(this._tabsList, 'dv-horizontal');
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Tabs.prototype.indexOf = function (id) {
         return this._tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
     };

package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts

@@ -5,6 +5,7 @@ import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
+import { DockviewHeaderDirection } from '../../options';
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
     readonly index: number;
@@ -26,6 +27,7 @@ export interface ITabsContainer extends IDisposable {
     readonly onGroupDragStart: Event<GroupDragEvent>;
     readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     hidden: boolean;
+    direction: DockviewHeaderDirection;
     delete(id: string): void;
     indexOf(id: string): number;
     setActive(isGroupActive: boolean): void;
@@ -53,6 +55,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private leftActions;
     private preActions;
     private _hidden;
+    private _direction;
     private dropdownPart;
     private _overflowTabs;
     private readonly _dropdownDisposable;
@@ -67,6 +70,8 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     get size(): number;
     get hidden(): boolean;
     set hidden(value: boolean);
+    get direction(): DockviewHeaderDirection;
+    set direction(value: DockviewHeaderDirection);
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     show(): void;

package/dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -42,6 +42,7 @@ var TabsContainer = /** @class */ (function (_super) {
         _this.accessor = accessor;
         _this.group = group;
         _this._hidden = false;
+        _this._direction = 'horizontal';
         _this.dropdownPart = null;
         _this._overflowTabs = [];
         _this._dropdownDisposable = new lifecycle_1.MutableDisposable();
@@ -144,6 +145,26 @@ var TabsContainer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TabsContainer.prototype, "direction", {
+        get: function () {
+            return this._direction;
+        },
+        set: function (value) {
+            this._direction = value;
+            if (value === 'vertical') {
+                (0, dom_1.addClasses)(this._element, 'dv-groupview-header-vertical');
+                (0, dom_1.addClasses)(this.rightActionsContainer, 'dv-right-actions-container-vertical');
+                this.tabs.direction = value;
+            }
+            else {
+                (0, dom_1.removeClasses)(this._element, 'dv-groupview-header-vertical');
+                (0, dom_1.removeClasses)(this.rightActionsContainer, 'dv-right-actions-container-vertical');
+                this.tabs.direction = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TabsContainer.prototype, "element", {
         get: function () {
             return this._element;

package/dist/cjs/dockview/deserializer.js

@@ -16,7 +16,7 @@ var DefaultDockviewDeserialzier = /** @class */ (function () {
         var viewData = panelData.view;
         var contentComponent = viewData
             ? viewData.content.id
-            : (_a = panelData.contentComponent) !== null && _a !== void 0 ? _a : 'unknown';
+            : ((_a = panelData.contentComponent) !== null && _a !== void 0 ? _a : 'unknown');
         var tabComponent = viewData
             ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
             : panelData.tabComponent;

package/dist/cjs/dockview/dockviewComponent.d.ts

@@ -3,7 +3,7 @@ import { Position } from '../dnd/droptarget';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { Event, Emitter } from '../events';
 import { IWatermarkRenderer, GroupviewPanelState } from './types';
-import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, DockviewOptions, MovementOptions } from './options';
+import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, DockviewOptions, MovementOptions, DockviewHeaderPosition } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
@@ -238,6 +238,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get options(): DockviewComponentOptions;
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
+    get defaultHeaderPosition(): DockviewHeaderPosition;
     get api(): DockviewApi;
     get floatingGroups(): DockviewFloatingGroupPanel[];
     /**