dockview-core 5.2.0 → 6.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/cjs/api/component.api.d.ts +93 -1
- package/dist/cjs/api/component.api.js +146 -0
- package/dist/cjs/api/dockviewGroupPanelApi.d.ts +26 -0
- package/dist/cjs/api/dockviewGroupPanelApi.js +21 -1
- package/dist/cjs/api/entryPoints.js +4 -5
- package/dist/cjs/array.js +7 -8
- package/dist/cjs/dnd/dataTransfer.d.ts +2 -1
- package/dist/cjs/dnd/dataTransfer.js +5 -4
- package/dist/cjs/dnd/droptarget.d.ts +12 -0
- package/dist/cjs/dnd/droptarget.js +38 -10
- package/dist/cjs/dnd/ghost.js +1 -2
- package/dist/cjs/dockview/components/panel/content.js +5 -1
- package/dist/cjs/dockview/components/popupService.d.ts +9 -2
- package/dist/cjs/dockview/components/popupService.js +24 -9
- package/dist/cjs/dockview/components/tab/tab.d.ts +6 -1
- package/dist/cjs/dockview/components/tab/tab.js +81 -9
- package/dist/cjs/dockview/components/titlebar/tabGroupChip.d.ts +30 -0
- package/dist/cjs/dockview/components/titlebar/tabGroupChip.js +95 -0
- package/dist/cjs/dockview/components/titlebar/tabGroupIndicator.d.ts +71 -0
- package/dist/cjs/dockview/components/titlebar/tabGroupIndicator.js +471 -0
- package/dist/cjs/dockview/components/titlebar/tabGroups.d.ts +57 -0
- package/dist/cjs/dockview/components/titlebar/tabGroups.js +612 -0
- package/dist/cjs/dockview/components/titlebar/tabOverflowControl.js +1 -2
- package/dist/cjs/dockview/components/titlebar/tabs.d.ts +59 -0
- package/dist/cjs/dockview/components/titlebar/tabs.js +1227 -144
- package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts +6 -0
- package/dist/cjs/dockview/components/titlebar/tabsContainer.js +132 -14
- package/dist/cjs/dockview/contextMenu.d.ts +10 -0
- package/dist/cjs/dockview/contextMenu.js +298 -0
- package/dist/cjs/dockview/dockviewComponent.d.ts +60 -3
- package/dist/cjs/dockview/dockviewComponent.js +712 -126
- package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts +83 -0
- package/dist/cjs/dockview/dockviewGroupPanelModel.js +619 -27
- package/dist/cjs/dockview/dockviewShell.d.ts +128 -0
- package/dist/cjs/dockview/dockviewShell.js +681 -0
- package/dist/cjs/dockview/events.d.ts +9 -0
- package/dist/cjs/dockview/framework.d.ts +14 -0
- package/dist/cjs/dockview/options.d.ts +92 -10
- package/dist/cjs/dockview/options.js +10 -7
- package/dist/cjs/dockview/tabGroup.d.ts +99 -0
- package/dist/cjs/dockview/tabGroup.js +219 -0
- package/dist/cjs/dockview/tabGroupAccent.d.ts +65 -0
- package/dist/cjs/dockview/tabGroupAccent.js +128 -0
- package/dist/cjs/dockview/theme.d.ts +56 -1
- package/dist/cjs/dockview/theme.js +103 -6
- package/dist/cjs/dockview/types.d.ts +2 -0
- package/dist/cjs/dom.js +19 -19
- package/dist/cjs/events.js +2 -2
- package/dist/cjs/gridview/baseComponentGridview.d.ts +1 -0
- package/dist/cjs/gridview/baseComponentGridview.js +6 -3
- package/dist/cjs/gridview/gridview.js +7 -7
- package/dist/cjs/index.d.ts +8 -5
- package/dist/cjs/index.js +6 -1
- package/dist/cjs/popoutWindow.js +3 -3
- package/dist/cjs/splitview/splitviewPanel.d.ts +1 -1
- package/dist/dockview-core.js +6942 -2777
- package/dist/dockview-core.min.js +2 -2
- package/dist/dockview-core.min.js.map +1 -1
- package/dist/dockview-core.min.noStyle.js +2 -2
- package/dist/dockview-core.min.noStyle.js.map +1 -1
- package/dist/dockview-core.noStyle.js +6940 -2775
- package/dist/esm/api/component.api.d.ts +93 -1
- package/dist/esm/api/component.api.js +118 -0
- package/dist/esm/api/dockviewGroupPanelApi.d.ts +26 -0
- package/dist/esm/api/dockviewGroupPanelApi.js +21 -1
- package/dist/esm/dnd/dataTransfer.d.ts +2 -1
- package/dist/esm/dnd/dataTransfer.js +2 -1
- package/dist/esm/dnd/droptarget.d.ts +12 -0
- package/dist/esm/dnd/droptarget.js +33 -5
- package/dist/esm/dockview/components/panel/content.js +5 -1
- package/dist/esm/dockview/components/popupService.d.ts +9 -2
- package/dist/esm/dockview/components/popupService.js +23 -9
- package/dist/esm/dockview/components/tab/tab.d.ts +6 -1
- package/dist/esm/dockview/components/tab/tab.js +83 -9
- package/dist/esm/dockview/components/titlebar/tabGroupChip.d.ts +30 -0
- package/dist/esm/dockview/components/titlebar/tabGroupChip.js +68 -0
- package/dist/esm/dockview/components/titlebar/tabGroupIndicator.d.ts +71 -0
- package/dist/esm/dockview/components/titlebar/tabGroupIndicator.js +354 -0
- package/dist/esm/dockview/components/titlebar/tabGroups.d.ts +57 -0
- package/dist/esm/dockview/components/titlebar/tabGroups.js +406 -0
- package/dist/esm/dockview/components/titlebar/tabs.d.ts +59 -0
- package/dist/esm/dockview/components/titlebar/tabs.js +1011 -99
- package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts +6 -0
- package/dist/esm/dockview/components/titlebar/tabsContainer.js +105 -7
- package/dist/esm/dockview/contextMenu.d.ts +10 -0
- package/dist/esm/dockview/contextMenu.js +213 -0
- package/dist/esm/dockview/dockviewComponent.d.ts +60 -3
- package/dist/esm/dockview/dockviewComponent.js +460 -35
- package/dist/esm/dockview/dockviewGroupPanelModel.d.ts +83 -0
- package/dist/esm/dockview/dockviewGroupPanelModel.js +460 -4
- package/dist/esm/dockview/dockviewShell.d.ts +128 -0
- package/dist/esm/dockview/dockviewShell.js +621 -0
- package/dist/esm/dockview/events.d.ts +9 -0
- package/dist/esm/dockview/framework.d.ts +14 -0
- package/dist/esm/dockview/options.d.ts +92 -10
- package/dist/esm/dockview/options.js +5 -2
- package/dist/esm/dockview/tabGroup.d.ts +99 -0
- package/dist/esm/dockview/tabGroup.js +144 -0
- package/dist/esm/dockview/tabGroupAccent.d.ts +65 -0
- package/dist/esm/dockview/tabGroupAccent.js +116 -0
- package/dist/esm/dockview/theme.d.ts +56 -1
- package/dist/esm/dockview/theme.js +102 -5
- package/dist/esm/dockview/types.d.ts +2 -0
- package/dist/esm/dom.js +1 -1
- package/dist/esm/gridview/baseComponentGridview.d.ts +1 -0
- package/dist/esm/gridview/baseComponentGridview.js +4 -1
- package/dist/esm/index.d.ts +8 -5
- package/dist/esm/index.js +2 -1
- package/dist/esm/popoutWindow.js +1 -1
- package/dist/esm/splitview/splitviewPanel.d.ts +1 -1
- package/dist/package/main.cjs.js +6936 -2801
- package/dist/package/main.cjs.min.js +2 -2
- package/dist/package/main.esm.min.mjs +2 -2
- package/dist/package/main.esm.mjs +6922 -2800
- package/dist/styles/dockview.css +1945 -196
- package/package.json +5 -1
|
@@ -4,6 +4,7 @@ import { DockviewApi } from '../api/component.api';
|
|
|
4
4
|
import { IDockviewPanel } from './dockviewPanel';
|
|
5
5
|
import { DockviewGroupPanel } from './dockviewGroupPanel';
|
|
6
6
|
import { IDockviewEvent } from '../events';
|
|
7
|
+
import { ITabGroup } from './tabGroup';
|
|
7
8
|
export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content' | 'edge';
|
|
8
9
|
export interface DockviewWillShowOverlayLocationEventOptions {
|
|
9
10
|
readonly kind: DockviewGroupDropLocation;
|
|
@@ -12,6 +13,14 @@ export interface DockviewWillShowOverlayLocationEventOptions {
|
|
|
12
13
|
readonly group: DockviewGroupPanel | undefined;
|
|
13
14
|
getData: () => PanelTransfer | undefined;
|
|
14
15
|
}
|
|
16
|
+
export interface DockviewTabGroupChangeEvent {
|
|
17
|
+
readonly tabGroup: ITabGroup;
|
|
18
|
+
}
|
|
19
|
+
export interface DockviewTabGroupPanelChangeEvent {
|
|
20
|
+
readonly tabGroup: ITabGroup;
|
|
21
|
+
readonly panelId: string;
|
|
22
|
+
}
|
|
23
|
+
export type DockviewTabGroupCollapsedChangeEvent = DockviewTabGroupChangeEvent;
|
|
15
24
|
export declare class DockviewWillShowOverlayLocationEvent implements IDockviewEvent {
|
|
16
25
|
private readonly event;
|
|
17
26
|
readonly options: DockviewWillShowOverlayLocationEventOptions;
|
|
@@ -3,8 +3,10 @@ import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
|
|
|
3
3
|
import { DockviewPanelApi } from '../api/dockviewPanelApi';
|
|
4
4
|
import { PanelParameters } from '../framwork';
|
|
5
5
|
import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
|
|
6
|
+
import { DockviewGroupLocation } from './dockviewGroupPanelModel';
|
|
6
7
|
import { IDockviewPanel } from './dockviewPanel';
|
|
7
8
|
import { DockviewHeaderPosition } from './options';
|
|
9
|
+
import { ITabGroup } from './tabGroup';
|
|
8
10
|
export interface IGroupPanelBaseProps<T extends {
|
|
9
11
|
[index: string]: any;
|
|
10
12
|
} = any> extends PanelParameters<T> {
|
|
@@ -28,6 +30,7 @@ export interface IDockviewHeaderActionsProps {
|
|
|
28
30
|
isGroupActive: boolean;
|
|
29
31
|
group: DockviewGroupPanel;
|
|
30
32
|
headerPosition: DockviewHeaderPosition;
|
|
33
|
+
location?: DockviewGroupLocation;
|
|
31
34
|
}
|
|
32
35
|
export interface IGroupHeaderProps {
|
|
33
36
|
api: DockviewGroupPanelApi;
|
|
@@ -41,3 +44,14 @@ export interface IWatermarkPanelProps {
|
|
|
41
44
|
export interface DockviewReadyEvent {
|
|
42
45
|
api: DockviewApi;
|
|
43
46
|
}
|
|
47
|
+
export interface ITabGroupChipRenderer {
|
|
48
|
+
readonly element: HTMLElement;
|
|
49
|
+
init(params: {
|
|
50
|
+
tabGroup: ITabGroup;
|
|
51
|
+
api: DockviewApi;
|
|
52
|
+
}): void;
|
|
53
|
+
update?(params: {
|
|
54
|
+
tabGroup: ITabGroup;
|
|
55
|
+
}): void;
|
|
56
|
+
dispose(): void;
|
|
57
|
+
}
|
|
@@ -11,19 +11,63 @@ import { GroupOptions } from './dockviewGroupPanelModel';
|
|
|
11
11
|
import { DockviewGroupDropLocation } from './events';
|
|
12
12
|
import { IDockviewPanel } from './dockviewPanel';
|
|
13
13
|
import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
|
|
14
|
-
import { IGroupHeaderProps } from './framework';
|
|
14
|
+
import { IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
|
|
15
15
|
import { FloatingGroupOptions } from './dockviewComponent';
|
|
16
16
|
import { Contraints } from '../gridview/gridviewPanel';
|
|
17
17
|
import { AcceptableEvent, IAcceptableEvent } from '../events';
|
|
18
18
|
import { DockviewTheme } from './theme';
|
|
19
|
+
import { ITabGroup } from './tabGroup';
|
|
20
|
+
import { DockviewTabGroupColorEntry } from './tabGroupAccent';
|
|
19
21
|
export interface IHeaderActionsRenderer extends IDisposable {
|
|
20
22
|
readonly element: HTMLElement;
|
|
21
23
|
init(params: IGroupHeaderProps): void;
|
|
22
24
|
}
|
|
23
|
-
export
|
|
25
|
+
export type BuiltInContextMenuItem = 'close' | 'closeOthers' | 'closeAll' | 'separator';
|
|
26
|
+
export type BuiltInChipContextMenuItem = 'separator' | 'colorPicker' | 'rename';
|
|
27
|
+
export interface ContextMenuItemConfig {
|
|
28
|
+
label?: string;
|
|
29
|
+
/**
|
|
30
|
+
* A framework component to render as the menu item.
|
|
31
|
+
* The component type is opaque to core; the framework adapter renders it.
|
|
32
|
+
*/
|
|
33
|
+
component?: unknown;
|
|
34
|
+
componentProps?: object;
|
|
35
|
+
/**
|
|
36
|
+
* A raw DOM element to embed as-is in the context menu.
|
|
37
|
+
* Use this when you want to render custom content without a framework component.
|
|
38
|
+
*/
|
|
39
|
+
element?: HTMLElement;
|
|
40
|
+
action?: () => void;
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
}
|
|
43
|
+
export type ContextMenuItem = BuiltInContextMenuItem | ContextMenuItemConfig;
|
|
44
|
+
export interface GetTabContextMenuItemsParams {
|
|
45
|
+
panel: IDockviewPanel;
|
|
46
|
+
group: DockviewGroupPanel;
|
|
47
|
+
api: DockviewApi;
|
|
24
48
|
event: MouseEvent;
|
|
49
|
+
}
|
|
50
|
+
export interface GetTabGroupChipContextMenuItemsParams {
|
|
51
|
+
tabGroup: ITabGroup;
|
|
52
|
+
group: DockviewGroupPanel;
|
|
25
53
|
api: DockviewApi;
|
|
54
|
+
event: MouseEvent;
|
|
55
|
+
}
|
|
56
|
+
export interface IContextMenuItemComponentProps {
|
|
26
57
|
panel: IDockviewPanel;
|
|
58
|
+
group: DockviewGroupPanel;
|
|
59
|
+
api: DockviewApi;
|
|
60
|
+
/** Call to close the context menu */
|
|
61
|
+
close: () => void;
|
|
62
|
+
componentProps?: object;
|
|
63
|
+
}
|
|
64
|
+
export interface IContextMenuItemRenderer extends IDisposable {
|
|
65
|
+
readonly element: HTMLElement;
|
|
66
|
+
init(props: IContextMenuItemComponentProps): void;
|
|
67
|
+
}
|
|
68
|
+
export interface CreateContextMenuItemComponentOptions {
|
|
69
|
+
id: string;
|
|
70
|
+
component: unknown;
|
|
27
71
|
}
|
|
28
72
|
export interface ViewFactoryData {
|
|
29
73
|
content: string;
|
|
@@ -70,19 +114,56 @@ export interface DockviewOptions {
|
|
|
70
114
|
*/
|
|
71
115
|
scrollbars?: 'native' | 'custom';
|
|
72
116
|
/**
|
|
73
|
-
*
|
|
117
|
+
* Return the items to display in the tab context menu on right-click.
|
|
118
|
+
*
|
|
119
|
+
* Use built-in string shortcuts (`'close'`, `'closeOthers'`, `'closeAll'`, `'separator'`)
|
|
120
|
+
* or provide a `ContextMenuItemConfig` object for custom items.
|
|
121
|
+
*
|
|
122
|
+
* If omitted, no context menu is shown.
|
|
123
|
+
* Return an empty array to suppress the menu for specific cases.
|
|
124
|
+
*/
|
|
125
|
+
getTabContextMenuItems?: (params: GetTabContextMenuItemsParams) => ContextMenuItem[];
|
|
126
|
+
/**
|
|
127
|
+
* Return the items to display in the tab group chip context menu on right-click.
|
|
128
|
+
*
|
|
129
|
+
* Use built-in string shortcuts (`'separator'`, `'colorPicker'`, `'rename'`) or provide a
|
|
130
|
+
* `ContextMenuItemConfig` object for custom items.
|
|
131
|
+
* `'colorPicker'` renders a native grid of color swatches for the tab group.
|
|
132
|
+
* `'rename'` renders an inline text input to rename the tab group.
|
|
133
|
+
*
|
|
134
|
+
* If omitted, no context menu is shown on chip right-click.
|
|
135
|
+
* Return an empty array to suppress the menu for specific cases.
|
|
136
|
+
*/
|
|
137
|
+
getTabGroupChipContextMenuItems?: (params: GetTabGroupChipContextMenuItemsParams) => (BuiltInChipContextMenuItem | ContextMenuItemConfig)[];
|
|
138
|
+
/**
|
|
139
|
+
* Factory to create custom tab group chip renderers.
|
|
140
|
+
* If not provided, the default chip renderer is used.
|
|
141
|
+
*/
|
|
142
|
+
createTabGroupChipComponent?: (tabGroup: ITabGroup) => ITabGroupChipRenderer;
|
|
143
|
+
/**
|
|
144
|
+
* Replace the built-in tab group color palette with a user-defined list.
|
|
74
145
|
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
146
|
+
* Each entry has an `id` (stored on `tabGroup.color` and serialized),
|
|
147
|
+
* a `value` (any CSS color expression — hex, rgb(), `var(...)`, etc.),
|
|
148
|
+
* and an optional `label` shown in the context menu picker.
|
|
149
|
+
*
|
|
150
|
+
* If omitted, the default 9-color palette is used. The list fully
|
|
151
|
+
* replaces the defaults — there is no merge.
|
|
152
|
+
*/
|
|
153
|
+
tabGroupColors?: DockviewTabGroupColorEntry[];
|
|
154
|
+
/**
|
|
155
|
+
* Controls how dockview applies tab group color accents.
|
|
79
156
|
*
|
|
80
|
-
*
|
|
157
|
+
* - `'palette'` (default): write `--dv-tab-group-color`, render the
|
|
158
|
+
* color picker, and apply built-in accent styling.
|
|
159
|
+
* - `'off'`: opt out entirely. No `--dv-tab-group-color` is written,
|
|
160
|
+
* the color picker is suppressed, and chips/indicators render
|
|
161
|
+
* without the accent. The `tg.color` data field is preserved so
|
|
162
|
+
* custom chip renderers can still read it and roll their own visual.
|
|
81
163
|
*/
|
|
82
|
-
|
|
164
|
+
tabGroupAccent?: 'palette' | 'off';
|
|
83
165
|
}
|
|
84
166
|
export type TabAnimation = 'smooth' | 'default';
|
|
85
|
-
export declare const DEFAULT_TAB_ANIMATION: TabAnimation;
|
|
86
167
|
export interface DockviewDndOverlayEvent extends IAcceptableEvent {
|
|
87
168
|
nativeEvent: DragEvent;
|
|
88
169
|
target: DockviewGroupDropLocation;
|
|
@@ -117,6 +198,7 @@ export interface DockviewFrameworkOptions {
|
|
|
117
198
|
createTabComponent?: (options: CreateComponentOptions) => ITabRenderer | undefined;
|
|
118
199
|
createComponent: (options: CreateComponentOptions) => IContentRenderer;
|
|
119
200
|
createWatermarkComponent?: () => IWatermarkRenderer;
|
|
201
|
+
createContextMenuItemComponent?: (options: CreateContextMenuItemComponentOptions) => IContextMenuItemRenderer | undefined;
|
|
120
202
|
}
|
|
121
203
|
export type DockviewComponentOptions = DockviewOptions & DockviewFrameworkOptions;
|
|
122
204
|
export interface PanelOptions<P extends object = Parameters> {
|
|
@@ -15,9 +15,12 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
15
15
|
};
|
|
16
16
|
})();
|
|
17
17
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
18
|
-
exports.
|
|
18
|
+
exports.PROPERTY_KEYS_DOCKVIEW = exports.DockviewUnhandledDragOverEvent = void 0;
|
|
19
|
+
exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
|
|
20
|
+
exports.isPanelOptionsWithGroup = isPanelOptionsWithGroup;
|
|
21
|
+
exports.isGroupOptionsWithPanel = isGroupOptionsWithPanel;
|
|
22
|
+
exports.isGroupOptionsWithGroup = isGroupOptionsWithGroup;
|
|
19
23
|
var events_1 = require("../events");
|
|
20
|
-
exports.DEFAULT_TAB_ANIMATION = 'default';
|
|
21
24
|
var DockviewUnhandledDragOverEvent = /** @class */ (function (_super) {
|
|
22
25
|
__extends(DockviewUnhandledDragOverEvent, _super);
|
|
23
26
|
function DockviewUnhandledDragOverEvent(nativeEvent, target, position, getData, group) {
|
|
@@ -56,7 +59,11 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
|
|
|
56
59
|
theme: undefined,
|
|
57
60
|
disableTabsOverflowList: undefined,
|
|
58
61
|
scrollbars: undefined,
|
|
59
|
-
|
|
62
|
+
getTabContextMenuItems: undefined,
|
|
63
|
+
getTabGroupChipContextMenuItems: undefined,
|
|
64
|
+
createTabGroupChipComponent: undefined,
|
|
65
|
+
tabGroupColors: undefined,
|
|
66
|
+
tabGroupAccent: undefined,
|
|
60
67
|
};
|
|
61
68
|
return Object.keys(properties);
|
|
62
69
|
})();
|
|
@@ -66,25 +73,21 @@ function isPanelOptionsWithPanel(data) {
|
|
|
66
73
|
}
|
|
67
74
|
return false;
|
|
68
75
|
}
|
|
69
|
-
exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
|
|
70
76
|
function isPanelOptionsWithGroup(data) {
|
|
71
77
|
if (data.referenceGroup) {
|
|
72
78
|
return true;
|
|
73
79
|
}
|
|
74
80
|
return false;
|
|
75
81
|
}
|
|
76
|
-
exports.isPanelOptionsWithGroup = isPanelOptionsWithGroup;
|
|
77
82
|
function isGroupOptionsWithPanel(data) {
|
|
78
83
|
if (data.referencePanel) {
|
|
79
84
|
return true;
|
|
80
85
|
}
|
|
81
86
|
return false;
|
|
82
87
|
}
|
|
83
|
-
exports.isGroupOptionsWithPanel = isGroupOptionsWithPanel;
|
|
84
88
|
function isGroupOptionsWithGroup(data) {
|
|
85
89
|
if (data.referenceGroup) {
|
|
86
90
|
return true;
|
|
87
91
|
}
|
|
88
92
|
return false;
|
|
89
93
|
}
|
|
90
|
-
exports.isGroupOptionsWithGroup = isGroupOptionsWithGroup;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { Event } from '../events';
|
|
2
|
+
import { CompositeDisposable } from '../lifecycle';
|
|
3
|
+
/**
|
|
4
|
+
* The accent color associated with a tab group.
|
|
5
|
+
*
|
|
6
|
+
* This is any CSS color expression: a palette id (e.g. `'grey'`, `'blue'`),
|
|
7
|
+
* a raw color literal (`'#abc123'`, `'rgb(0,0,0)'`), or `undefined` to inherit
|
|
8
|
+
* the default. Resolution to a concrete CSS value is handled by the
|
|
9
|
+
* dockview's `TabGroupColorPalette` (see `tabGroupAccent.ts`).
|
|
10
|
+
*/
|
|
11
|
+
export type DockviewTabGroupColor = string;
|
|
12
|
+
export interface SerializedTabGroup {
|
|
13
|
+
id: string;
|
|
14
|
+
label?: string;
|
|
15
|
+
color?: string;
|
|
16
|
+
collapsed: boolean;
|
|
17
|
+
panelIds: string[];
|
|
18
|
+
componentParams?: Record<string, unknown>;
|
|
19
|
+
}
|
|
20
|
+
export interface TabGroupOptions {
|
|
21
|
+
label?: string;
|
|
22
|
+
color?: string;
|
|
23
|
+
collapsed?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Free-form data passed to a custom chip renderer
|
|
26
|
+
* (`createTabGroupChipComponent`). Read via `tabGroup.componentParams`
|
|
27
|
+
* inside the renderer's `init` / `update`. Must be JSON-serializable to
|
|
28
|
+
* round-trip through layout serialization.
|
|
29
|
+
*/
|
|
30
|
+
componentParams?: Record<string, unknown>;
|
|
31
|
+
}
|
|
32
|
+
export interface ITabGroup {
|
|
33
|
+
readonly id: string;
|
|
34
|
+
readonly label: string;
|
|
35
|
+
readonly color: string | undefined;
|
|
36
|
+
readonly collapsed: boolean;
|
|
37
|
+
readonly panelIds: readonly string[];
|
|
38
|
+
readonly size: number;
|
|
39
|
+
readonly isEmpty: boolean;
|
|
40
|
+
readonly componentParams: Record<string, unknown> | undefined;
|
|
41
|
+
readonly onDidChange: Event<void>;
|
|
42
|
+
readonly onDidPanelChange: Event<{
|
|
43
|
+
panelId: string;
|
|
44
|
+
type: 'add' | 'remove';
|
|
45
|
+
}>;
|
|
46
|
+
readonly onDidCollapseChange: Event<boolean>;
|
|
47
|
+
readonly onDidDestroy: Event<void>;
|
|
48
|
+
addPanel(panelId: string, index?: number): void;
|
|
49
|
+
removePanel(panelId: string): boolean;
|
|
50
|
+
indexOfPanel(panelId: string): number;
|
|
51
|
+
containsPanel(panelId: string): boolean;
|
|
52
|
+
setLabel(value: string): void;
|
|
53
|
+
setColor(value: string | undefined): void;
|
|
54
|
+
setComponentParams(value: Record<string, unknown> | undefined): void;
|
|
55
|
+
collapse(): void;
|
|
56
|
+
expand(): void;
|
|
57
|
+
toggle(): void;
|
|
58
|
+
toJSON(): SerializedTabGroup;
|
|
59
|
+
dispose(): void;
|
|
60
|
+
}
|
|
61
|
+
export declare class TabGroup extends CompositeDisposable implements ITabGroup {
|
|
62
|
+
readonly id: string;
|
|
63
|
+
private _label;
|
|
64
|
+
private _color;
|
|
65
|
+
private _collapsed;
|
|
66
|
+
private _componentParams;
|
|
67
|
+
private readonly _panelIds;
|
|
68
|
+
private readonly _onDidChange;
|
|
69
|
+
readonly onDidChange: Event<void>;
|
|
70
|
+
private readonly _onDidPanelChange;
|
|
71
|
+
readonly onDidPanelChange: Event<{
|
|
72
|
+
panelId: string;
|
|
73
|
+
type: "add" | "remove";
|
|
74
|
+
}>;
|
|
75
|
+
private readonly _onDidCollapseChange;
|
|
76
|
+
readonly onDidCollapseChange: Event<boolean>;
|
|
77
|
+
private readonly _onDidDestroy;
|
|
78
|
+
readonly onDidDestroy: Event<void>;
|
|
79
|
+
get label(): string;
|
|
80
|
+
get color(): string | undefined;
|
|
81
|
+
get componentParams(): Record<string, unknown> | undefined;
|
|
82
|
+
setLabel(value: string): void;
|
|
83
|
+
setColor(value: string | undefined): void;
|
|
84
|
+
setComponentParams(value: Record<string, unknown> | undefined): void;
|
|
85
|
+
get collapsed(): boolean;
|
|
86
|
+
get panelIds(): readonly string[];
|
|
87
|
+
get size(): number;
|
|
88
|
+
get isEmpty(): boolean;
|
|
89
|
+
constructor(id: string, options?: TabGroupOptions);
|
|
90
|
+
addPanel(panelId: string, index?: number): void;
|
|
91
|
+
removePanel(panelId: string): boolean;
|
|
92
|
+
indexOfPanel(panelId: string): number;
|
|
93
|
+
containsPanel(panelId: string): boolean;
|
|
94
|
+
collapse(): void;
|
|
95
|
+
expand(): void;
|
|
96
|
+
toggle(): void;
|
|
97
|
+
toJSON(): SerializedTabGroup;
|
|
98
|
+
dispose(): void;
|
|
99
|
+
}
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
18
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
19
|
+
if (!m) return o;
|
|
20
|
+
var i = m.call(o), r, ar = [], e;
|
|
21
|
+
try {
|
|
22
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
23
|
+
}
|
|
24
|
+
catch (error) { e = { error: error }; }
|
|
25
|
+
finally {
|
|
26
|
+
try {
|
|
27
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
28
|
+
}
|
|
29
|
+
finally { if (e) throw e.error; }
|
|
30
|
+
}
|
|
31
|
+
return ar;
|
|
32
|
+
};
|
|
33
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
34
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
35
|
+
if (ar || !(i in from)) {
|
|
36
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
37
|
+
ar[i] = from[i];
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
41
|
+
};
|
|
42
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
43
|
+
exports.TabGroup = void 0;
|
|
44
|
+
var events_1 = require("../events");
|
|
45
|
+
var lifecycle_1 = require("../lifecycle");
|
|
46
|
+
var TabGroup = /** @class */ (function (_super) {
|
|
47
|
+
__extends(TabGroup, _super);
|
|
48
|
+
function TabGroup(id, options) {
|
|
49
|
+
var _a, _b;
|
|
50
|
+
var _this = _super.call(this) || this;
|
|
51
|
+
_this.id = id;
|
|
52
|
+
_this._collapsed = false;
|
|
53
|
+
_this._panelIds = [];
|
|
54
|
+
_this._onDidChange = new events_1.Emitter();
|
|
55
|
+
_this.onDidChange = _this._onDidChange.event;
|
|
56
|
+
_this._onDidPanelChange = new events_1.Emitter();
|
|
57
|
+
_this.onDidPanelChange = _this._onDidPanelChange.event;
|
|
58
|
+
_this._onDidCollapseChange = new events_1.Emitter();
|
|
59
|
+
_this.onDidCollapseChange = _this._onDidCollapseChange.event;
|
|
60
|
+
_this._onDidDestroy = new events_1.Emitter();
|
|
61
|
+
_this.onDidDestroy = _this._onDidDestroy.event;
|
|
62
|
+
_this._label = (_a = options === null || options === void 0 ? void 0 : options.label) !== null && _a !== void 0 ? _a : '';
|
|
63
|
+
_this._color = (options === null || options === void 0 ? void 0 : options.color) === '' ? undefined : options === null || options === void 0 ? void 0 : options.color;
|
|
64
|
+
_this._collapsed = (_b = options === null || options === void 0 ? void 0 : options.collapsed) !== null && _b !== void 0 ? _b : false;
|
|
65
|
+
_this._componentParams = options === null || options === void 0 ? void 0 : options.componentParams;
|
|
66
|
+
_this.addDisposables(_this._onDidChange, _this._onDidPanelChange, _this._onDidCollapseChange, _this._onDidDestroy);
|
|
67
|
+
return _this;
|
|
68
|
+
}
|
|
69
|
+
Object.defineProperty(TabGroup.prototype, "label", {
|
|
70
|
+
get: function () {
|
|
71
|
+
return this._label;
|
|
72
|
+
},
|
|
73
|
+
enumerable: false,
|
|
74
|
+
configurable: true
|
|
75
|
+
});
|
|
76
|
+
Object.defineProperty(TabGroup.prototype, "color", {
|
|
77
|
+
get: function () {
|
|
78
|
+
return this._color;
|
|
79
|
+
},
|
|
80
|
+
enumerable: false,
|
|
81
|
+
configurable: true
|
|
82
|
+
});
|
|
83
|
+
Object.defineProperty(TabGroup.prototype, "componentParams", {
|
|
84
|
+
get: function () {
|
|
85
|
+
return this._componentParams;
|
|
86
|
+
},
|
|
87
|
+
enumerable: false,
|
|
88
|
+
configurable: true
|
|
89
|
+
});
|
|
90
|
+
TabGroup.prototype.setLabel = function (value) {
|
|
91
|
+
if (this.isDisposed || this._label === value) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
this._label = value;
|
|
95
|
+
this._onDidChange.fire();
|
|
96
|
+
};
|
|
97
|
+
TabGroup.prototype.setColor = function (value) {
|
|
98
|
+
if (this.isDisposed) {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
var next = value === '' ? undefined : value;
|
|
102
|
+
if (this._color === next) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
this._color = next;
|
|
106
|
+
this._onDidChange.fire();
|
|
107
|
+
};
|
|
108
|
+
TabGroup.prototype.setComponentParams = function (value) {
|
|
109
|
+
if (this.isDisposed) {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
this._componentParams = value;
|
|
113
|
+
this._onDidChange.fire();
|
|
114
|
+
};
|
|
115
|
+
Object.defineProperty(TabGroup.prototype, "collapsed", {
|
|
116
|
+
get: function () {
|
|
117
|
+
return this._collapsed;
|
|
118
|
+
},
|
|
119
|
+
enumerable: false,
|
|
120
|
+
configurable: true
|
|
121
|
+
});
|
|
122
|
+
Object.defineProperty(TabGroup.prototype, "panelIds", {
|
|
123
|
+
get: function () {
|
|
124
|
+
return this._panelIds;
|
|
125
|
+
},
|
|
126
|
+
enumerable: false,
|
|
127
|
+
configurable: true
|
|
128
|
+
});
|
|
129
|
+
Object.defineProperty(TabGroup.prototype, "size", {
|
|
130
|
+
get: function () {
|
|
131
|
+
return this._panelIds.length;
|
|
132
|
+
},
|
|
133
|
+
enumerable: false,
|
|
134
|
+
configurable: true
|
|
135
|
+
});
|
|
136
|
+
Object.defineProperty(TabGroup.prototype, "isEmpty", {
|
|
137
|
+
get: function () {
|
|
138
|
+
return this._panelIds.length === 0;
|
|
139
|
+
},
|
|
140
|
+
enumerable: false,
|
|
141
|
+
configurable: true
|
|
142
|
+
});
|
|
143
|
+
TabGroup.prototype.addPanel = function (panelId, index) {
|
|
144
|
+
if (this.isDisposed) {
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
if (this._panelIds.includes(panelId)) {
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
var insertIndex = index !== undefined
|
|
151
|
+
? Math.max(0, Math.min(index, this._panelIds.length))
|
|
152
|
+
: this._panelIds.length;
|
|
153
|
+
this._panelIds.splice(insertIndex, 0, panelId);
|
|
154
|
+
this._onDidPanelChange.fire({ panelId: panelId, type: 'add' });
|
|
155
|
+
};
|
|
156
|
+
TabGroup.prototype.removePanel = function (panelId) {
|
|
157
|
+
if (this.isDisposed) {
|
|
158
|
+
return false;
|
|
159
|
+
}
|
|
160
|
+
var index = this._panelIds.indexOf(panelId);
|
|
161
|
+
if (index === -1) {
|
|
162
|
+
return false;
|
|
163
|
+
}
|
|
164
|
+
this._panelIds.splice(index, 1);
|
|
165
|
+
this._onDidPanelChange.fire({ panelId: panelId, type: 'remove' });
|
|
166
|
+
return true;
|
|
167
|
+
};
|
|
168
|
+
TabGroup.prototype.indexOfPanel = function (panelId) {
|
|
169
|
+
return this._panelIds.indexOf(panelId);
|
|
170
|
+
};
|
|
171
|
+
TabGroup.prototype.containsPanel = function (panelId) {
|
|
172
|
+
return this._panelIds.includes(panelId);
|
|
173
|
+
};
|
|
174
|
+
TabGroup.prototype.collapse = function () {
|
|
175
|
+
if (this.isDisposed || this._collapsed) {
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
178
|
+
this._collapsed = true;
|
|
179
|
+
this._onDidCollapseChange.fire(true);
|
|
180
|
+
};
|
|
181
|
+
TabGroup.prototype.expand = function () {
|
|
182
|
+
if (this.isDisposed || !this._collapsed) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
this._collapsed = false;
|
|
186
|
+
this._onDidCollapseChange.fire(false);
|
|
187
|
+
};
|
|
188
|
+
TabGroup.prototype.toggle = function () {
|
|
189
|
+
if (this._collapsed) {
|
|
190
|
+
this.expand();
|
|
191
|
+
}
|
|
192
|
+
else {
|
|
193
|
+
this.collapse();
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
TabGroup.prototype.toJSON = function () {
|
|
197
|
+
var result = {
|
|
198
|
+
id: this.id,
|
|
199
|
+
collapsed: this._collapsed,
|
|
200
|
+
panelIds: __spreadArray([], __read(this._panelIds), false),
|
|
201
|
+
};
|
|
202
|
+
if (this._label) {
|
|
203
|
+
result.label = this._label;
|
|
204
|
+
}
|
|
205
|
+
if (this._color !== undefined) {
|
|
206
|
+
result.color = this._color;
|
|
207
|
+
}
|
|
208
|
+
if (this._componentParams !== undefined) {
|
|
209
|
+
result.componentParams = this._componentParams;
|
|
210
|
+
}
|
|
211
|
+
return result;
|
|
212
|
+
};
|
|
213
|
+
TabGroup.prototype.dispose = function () {
|
|
214
|
+
this._onDidDestroy.fire();
|
|
215
|
+
_super.prototype.dispose.call(this);
|
|
216
|
+
};
|
|
217
|
+
return TabGroup;
|
|
218
|
+
}(lifecycle_1.CompositeDisposable));
|
|
219
|
+
exports.TabGroup = TabGroup;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A single entry in the tab-group color palette.
|
|
3
|
+
*
|
|
4
|
+
* `id` is the value stored on `ITabGroup.color` and serialized in
|
|
5
|
+
* `SerializedTabGroup.color`. `value` is any CSS color expression — a hex
|
|
6
|
+
* literal, an rgb()/hsl()/oklch() function, or a `var(...)` reference.
|
|
7
|
+
*
|
|
8
|
+
* The default palette ships with `var(--dv-tab-group-color-${id})` values so
|
|
9
|
+
* themes can override the defaults purely in CSS. User-supplied palettes
|
|
10
|
+
* typically use raw color literals.
|
|
11
|
+
*/
|
|
12
|
+
export interface DockviewTabGroupColorEntry {
|
|
13
|
+
id: string;
|
|
14
|
+
value: string;
|
|
15
|
+
label?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const DEFAULT_TAB_GROUP_COLORS: readonly DockviewTabGroupColorEntry[];
|
|
18
|
+
/**
|
|
19
|
+
* Runtime palette for tab-group color accents.
|
|
20
|
+
*
|
|
21
|
+
* Resolves a stored `color` string to a CSS color expression, with three
|
|
22
|
+
* fall-through modes:
|
|
23
|
+
* 1. `id` matches an entry → entry's `value`
|
|
24
|
+
* 2. `id` doesn't match → `id` itself (raw CSS literal pass-through)
|
|
25
|
+
* 3. `id` is empty or undefined → undefined (caller skips assignment)
|
|
26
|
+
*
|
|
27
|
+
* When `enabled` is false the palette returns undefined for everything; this
|
|
28
|
+
* is the `tabGroupAccent: 'off'` opt-out path.
|
|
29
|
+
*/
|
|
30
|
+
export declare class TabGroupColorPalette {
|
|
31
|
+
private _entries;
|
|
32
|
+
private _byId;
|
|
33
|
+
private _enabled;
|
|
34
|
+
constructor(entries: readonly DockviewTabGroupColorEntry[], enabled?: boolean);
|
|
35
|
+
get enabled(): boolean;
|
|
36
|
+
set enabled(value: boolean);
|
|
37
|
+
/**
|
|
38
|
+
* Replace the entry list in place. Used by `updateOptions` so that
|
|
39
|
+
* existing palette references (held by chips, indicators, etc.) see
|
|
40
|
+
* the new palette without needing to be re-wired.
|
|
41
|
+
*/
|
|
42
|
+
setEntries(entries: readonly DockviewTabGroupColorEntry[]): void;
|
|
43
|
+
entries(): readonly DockviewTabGroupColorEntry[];
|
|
44
|
+
has(id: string): boolean;
|
|
45
|
+
get(id: string): DockviewTabGroupColorEntry | undefined;
|
|
46
|
+
/** First entry's id; used as the default when a color is unset. */
|
|
47
|
+
defaultId(): string | undefined;
|
|
48
|
+
/**
|
|
49
|
+
* Resolve a stored color to its CSS value, or undefined if no value
|
|
50
|
+
* should be written (palette disabled, or color empty/undefined).
|
|
51
|
+
*/
|
|
52
|
+
resolveValue(color: string | undefined): string | undefined;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Set the `--dv-tab-group-color` custom property on `el` to the resolved
|
|
56
|
+
* accent value, or remove it when the palette is disabled / color is unset.
|
|
57
|
+
*/
|
|
58
|
+
export declare function applyTabGroupAccent(el: HTMLElement, color: string | undefined, palette: TabGroupColorPalette | undefined): void;
|
|
59
|
+
/**
|
|
60
|
+
* Return the resolved CSS color for a tab group, or undefined when the
|
|
61
|
+
* palette is disabled or no color is set. Use this when you need the raw
|
|
62
|
+
* value to assign to a non-custom-property style (e.g. SVG stroke,
|
|
63
|
+
* backgroundColor on the indicator underline).
|
|
64
|
+
*/
|
|
65
|
+
export declare function resolveTabGroupAccent(color: string | undefined, palette: TabGroupColorPalette | undefined): string | undefined;
|