dockview-core 1.10.2 → 1.12.0

package/dist/esm/api/dockviewPanelApi.d.ts

@@ -19,6 +19,12 @@ export interface ActiveGroupEvent {
 export interface GroupChangedEvent {
 }
 export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' | 'onDidConstraintsChange' | 'setConstraints'> {
+    /**
+     * The id of the tab component renderer
+     *
+     * Undefined if no custom tab renderer is provided
+     */
+    readonly tabComponent: string | undefined;
     readonly group: DockviewGroupPanel;
     readonly isGroupActive: boolean;
     readonly renderer: DockviewPanelRenderer;

package/dist/esm/api/panelApi.d.ts

@@ -23,6 +23,10 @@ export interface PanelApi {
     setActive(): void;
     setVisible(isVisible: boolean): void;
     updateParameters(parameters: Parameters): void;
+    /**
+     * The id of the component renderer
+     */
+    readonly component: string;
     /**
      * The id of the panel that would have been assigned when the panel was created
      */

package/dist/esm/dockview/components/panel/content.js

@@ -72,7 +72,7 @@ export class ContentContainer extends CompositeDisposable {
         this.panel = panel;
         let container;
         switch (panel.api.renderer) {
-            case 'onlyWhenVisibile':
+            case 'onlyWhenVisible':
                 this.group.renderContainer.detatch(panel);
                 if (this.panel) {
                     if (doRender) {
@@ -118,7 +118,7 @@ export class ContentContainer extends CompositeDisposable {
     closePanel() {
         var _a;
         if (this.panel) {
-            if (this.panel.api.renderer === 'onlyWhenVisibile') {
+            if (this.panel.api.renderer === 'onlyWhenVisible') {
                 (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
             }
         }

package/dist/esm/dockview/components/tab/defaultTab.d.ts

@@ -5,8 +5,6 @@ import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
     private _element;
     private _content;
-    private _actionContainer;
-    private _list;
     private action;
     private params;
     get element(): HTMLElement;

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -10,27 +10,18 @@ export class DefaultTab extends CompositeDisposable {
         //
         this.params = {};
         this._element = document.createElement('div');
-        this._element.className = 'default-tab';
+        this._element.className = 'dv-default-tab';
         //
         this._content = document.createElement('div');
-        this._content.className = 'tab-content';
-        //
-        this._actionContainer = document.createElement('div');
-        this._actionContainer.className = 'action-container';
-        //
-        this._list = document.createElement('ul');
-        this._list.className = 'tab-list';
-        //
+        this._content.className = 'dv-default-tab-content';
         this.action = document.createElement('div');
-        this.action.className = 'tab-action';
+        this.action.className = 'dv-default-tab-action';
         this.action.appendChild(createCloseButton());
         //
         this._element.appendChild(this._content);
-        this._element.appendChild(this._actionContainer);
-        this._actionContainer.appendChild(this._list);
-        this._list.appendChild(this.action);
+        this._element.appendChild(this.action);
         //
-        this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
+        this.addDisposables(addDisposableListener(this.action, 'mousedown', (ev) => {
             ev.preventDefault();
         }));
         this.render();

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

@@ -4,6 +4,7 @@ import { Tab } from '../tab/tab';
 import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../../dom';
 import { WillShowOverlayLocationEvent, } from '../../dockviewGroupPanelModel';
+import { getPanelData } from '../../../dnd/dataTransfer';
 export class TabsContainer extends CompositeDisposable {
     get panels() {
         return this.tabs.map((_) => _.value.panel.id);
@@ -128,6 +129,10 @@ export class TabsContainer extends CompositeDisposable {
         }), this.voidContainer.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
                 kind: 'header_space',
+                panel: this.group.activePanel,
+                api: this.accessor.api,
+                group: this.group,
+                getData: getPanelData,
             }));
         }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
@@ -225,7 +230,13 @@ export class TabsContainer extends CompositeDisposable {
                 index: this.tabs.findIndex((x) => x.value === tab),
             });
         }), tab.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { kind: 'tab' }));
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'tab',
+                panel: this.group.activePanel,
+                api: this.accessor.api,
+                group: this.group,
+                getData: getPanelData,
+            }));
         }));
         const value = { value: tab, disposable };
         this.addTab(value, index);

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

@@ -5,6 +5,7 @@ import { Event, Emitter } from '../events';
 import { IWatermarkRenderer, GroupviewPanelState } from './types';
 import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, MovementOptions } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
+import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
 import { GroupOptions, GroupPanelViewState, DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from './dockviewGroupPanelModel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
@@ -156,6 +157,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get options(): DockviewComponentOptions;
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
+    get api(): DockviewApi;
     constructor(options: DockviewComponentOptions);
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: {
         skipRemoveGroup?: boolean;

package/dist/esm/dockview/dockviewComponent.js

@@ -141,7 +141,10 @@ export class DockviewComponent extends BaseGrid {
     }
     get renderer() {
         var _a;
-        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisible';
+    }
+    get api() {
+        return this._api;
     }
     constructor(options) {
         var _a, _b;
@@ -276,6 +279,10 @@ export class DockviewComponent extends BaseGrid {
             }
             this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
                 kind: 'edge',
+                panel: undefined,
+                api: this._api,
+                group: undefined,
+                getData: getPanelData,
             }));
         }), this._rootDropTarget.onDrop((event) => {
             var _a;

package/dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -118,14 +118,22 @@ export type DockviewGroupLocation = {
 };
 export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
     private readonly event;
-    private _kind;
+    private readonly options;
     get kind(): DockviewGroupDropLocation;
     get nativeEvent(): DragEvent;
     get position(): Position;
     get defaultPrevented(): boolean;
+    get panel(): IDockviewPanel | undefined;
+    get api(): DockviewApi;
+    get group(): DockviewGroupPanel | undefined;
     preventDefault(): void;
+    getData(): PanelTransfer | undefined;
     constructor(event: WillShowOverlayEvent, options: {
         kind: DockviewGroupDropLocation;
+        panel: IDockviewPanel | undefined;
+        api: DockviewApi;
+        group: DockviewGroupPanel | undefined;
+        getData: () => PanelTransfer | undefined;
     });
 }
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -40,7 +40,7 @@ export class DockviewWillDropEvent extends DockviewDidDropEvent {
 }
 export class WillShowOverlayLocationEvent {
     get kind() {
-        return this._kind;
+        return this.options.kind;
     }
     get nativeEvent() {
         return this.event.nativeEvent;
@@ -51,12 +51,24 @@ export class WillShowOverlayLocationEvent {
     get defaultPrevented() {
         return this.event.defaultPrevented;
     }
+    get panel() {
+        return this.options.panel;
+    }
+    get api() {
+        return this.options.api;
+    }
+    get group() {
+        return this.options.group;
+    }
     preventDefault() {
         this.event.preventDefault();
     }
+    getData() {
+        return this.options.getData();
+    }
     constructor(event, options) {
         this.event = event;
-        this._kind = options.kind;
+        this.options = options;
     }
 }
 export class DockviewGroupPanelModel extends CompositeDisposable {
@@ -195,6 +207,10 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
                 kind: 'content',
+                panel: this.activePanel,
+                api: this._api,
+                group: this.groupPanel,
+                getData: getPanelData,
             }));
         }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
     }

package/dist/esm/overlayRenderContainer.d.ts

@@ -1,7 +1,7 @@
 import { Droptarget } from './dnd/droptarget';
 import { CompositeDisposable } from './lifecycle';
 import { IDockviewPanel } from './dockview/dockviewPanel';
-export type DockviewPanelRenderer = 'onlyWhenVisibile' | 'always';
+export type DockviewPanelRenderer = 'onlyWhenVisible' | 'always';
 export interface IRenderable {
     readonly element: HTMLElement;
     readonly dropTarget: Droptarget;

package/dist/styles/dockview.css

@@ -737,19 +737,19 @@
   outline-offset: -1px;
   z-index: 5;
 }
-.tab.dv-tab-dragging .tab-action {
+.tab.dv-tab-dragging .dv-default-tab-action {
   background-color: var(--dv-activegroup-visiblepanel-tab-color);
 }
-.tab.active-tab > .default-tab .tab-action {
+.tab.active-tab .dv-default-tab .dv-default-tab-action {
   visibility: visible;
 }
-.tab.inactive-tab > .default-tab .tab-action {
+.tab.inactive-tab .dv-default-tab .dv-default-tab-action {
   visibility: hidden;
 }
-.tab.inactive-tab > .default-tab:hover .tab-action {
+.tab.inactive-tab .dv-default-tab:hover .dv-default-tab-action {
   visibility: visible;
 }
-.tab .default-tab {
+.tab .dv-default-tab {
   position: relative;
   height: 100%;
   display: flex;
@@ -759,28 +759,18 @@
   white-space: nowrap;
   text-overflow: elipsis;
 }
-.tab .default-tab .tab-content {
+.tab .dv-default-tab .dv-default-tab-content {
   padding: 0px 8px;
   flex-grow: 1;
 }
-.tab .default-tab .action-container {
-  text-align: right;
-  display: flex;
-}
-.tab .default-tab .action-container .tab-list {
-  display: flex;
-  padding: 0px;
-  margin: 0px;
-  justify-content: flex-end;
-}
-.tab .default-tab .action-container .tab-list .tab-action {
+.tab .dv-default-tab .dv-default-tab-action {
   padding: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
 }
-.tab .default-tab .action-container .tab-list .tab-action:hover {
+.tab .dv-default-tab .dv-default-tab-action:hover {
   border-radius: 2px;
   background-color: var(--dv-icon-hover-background-color);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "1.10.2",
+  "version": "1.12.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "keywords": [
     "splitview",