dockview-vue 3.2.0 → 4.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.
@@ -72,7 +72,8 @@ class VueRenderer extends AbstractVueRenderer {
72
72
  const props = {
73
73
  params: parameters.params,
74
74
  api: parameters.api,
75
- containerApi: parameters.containerApi
75
+ containerApi: parameters.containerApi,
76
+ tabLocation: parameters.tabLocation
76
77
  };
77
78
  (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
78
79
  this._renderDisposable = mountVueComponent(
@@ -164,12 +165,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
164
165
  popoutUrl: {},
165
166
  defaultRenderer: {},
166
167
  debug: { type: Boolean },
168
+ dndEdges: { type: [Boolean, Object] },
167
169
  rootOverlayModel: {},
168
- locked: { type: Boolean },
169
170
  disableDnd: { type: Boolean },
171
+ locked: { type: Boolean },
170
172
  className: {},
171
- gap: {},
172
173
  noPanelsOverlay: {},
174
+ theme: {},
175
+ disableTabsOverflowList: { type: Boolean },
173
176
  watermarkComponent: {},
174
177
  defaultTabComponent: {},
175
178
  rightHeaderActionsComponent: {},
@@ -71,7 +71,8 @@ class VueRenderer extends AbstractVueRenderer {
71
71
  const props = {
72
72
  params: parameters.params,
73
73
  api: parameters.api,
74
- containerApi: parameters.containerApi
74
+ containerApi: parameters.containerApi,
75
+ tabLocation: parameters.tabLocation
75
76
  };
76
77
  (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
77
78
  this._renderDisposable = mountVueComponent(
@@ -163,12 +164,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
163
164
  popoutUrl: {},
164
165
  defaultRenderer: {},
165
166
  debug: { type: Boolean },
167
+ dndEdges: { type: [Boolean, Object] },
166
168
  rootOverlayModel: {},
167
- locked: { type: Boolean },
168
169
  disableDnd: { type: Boolean },
170
+ locked: { type: Boolean },
169
171
  className: {},
170
- gap: {},
171
172
  noPanelsOverlay: {},
173
+ theme: {},
174
+ disableTabsOverflowList: { type: Boolean },
172
175
  watermarkComponent: {},
173
176
  defaultTabComponent: {},
174
177
  rightHeaderActionsComponent: {},
@@ -72,7 +72,8 @@ var __publicField = (obj, key, value) => {
72
72
  const props = {
73
73
  params: parameters.params,
74
74
  api: parameters.api,
75
- containerApi: parameters.containerApi
75
+ containerApi: parameters.containerApi,
76
+ tabLocation: parameters.tabLocation
76
77
  };
77
78
  (_a = this._renderDisposable) == null ? void 0 : _a.dispose();
78
79
  this._renderDisposable = mountVueComponent(
@@ -164,12 +165,14 @@ var __publicField = (obj, key, value) => {
164
165
  popoutUrl: {},
165
166
  defaultRenderer: {},
166
167
  debug: { type: Boolean },
168
+ dndEdges: { type: [Boolean, Object] },
167
169
  rootOverlayModel: {},
168
- locked: { type: Boolean },
169
170
  disableDnd: { type: Boolean },
171
+ locked: { type: Boolean },
170
172
  className: {},
171
- gap: {},
172
173
  noPanelsOverlay: {},
174
+ theme: {},
175
+ disableTabsOverflowList: { type: Boolean },
173
176
  watermarkComponent: {},
174
177
  defaultTabComponent: {},
175
178
  rightHeaderActionsComponent: {},
@@ -1,3 +1,23 @@
1
+ .dv-scrollable {
2
+ position: relative;
3
+ overflow: hidden;
4
+ width: 100%;
5
+ }
6
+ .dv-scrollable .dv-scrollbar-horizontal {
7
+ position: absolute;
8
+ bottom: 0px;
9
+ left: 0px;
10
+ height: 4px;
11
+ border-radius: 2px;
12
+ background-color: transparent;
13
+ transition-property: background-color;
14
+ transition-timing-function: ease-in-out;
15
+ transition-duration: 1s;
16
+ transition-delay: 0s;
17
+ }
18
+ .dv-scrollable:hover .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-resizing .dv-scrollbar-horizontal, .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar-horizontal {
19
+ background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));
20
+ }
1
21
  .dv-svg {
2
22
  display: inline-block;
3
23
  fill: currentcolor;
@@ -10,11 +30,16 @@
10
30
  --dv-tabs-and-actions-container-font-size: 13px;
11
31
  --dv-tabs-and-actions-container-height: 35px;
12
32
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
13
- --dv-drag-over-border-color: white;
33
+ --dv-drag-over-border-color: transparent;
14
34
  --dv-tabs-container-scrollbar-color: #888;
15
35
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
16
36
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
17
37
  --dv-overlay-z-index: 999;
38
+ --dv-tab-font-size: inherit;
39
+ --dv-border-radius: 0px;
40
+ --dv-tab-margin: 0;
41
+ --dv-sash-color: transparent;
42
+ --dv-active-sash-color: transparent;
18
43
  --dv-active-sash-transition-duration: 0.1s;
19
44
  --dv-active-sash-transition-delay: 0.5s;
20
45
  --dv-group-view-background-color: #1e1e1e;
@@ -31,17 +56,26 @@
31
56
  --dv-separator-border: rgb(68, 68, 68);
32
57
  --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
33
58
  }
59
+ .dockview-theme-dark .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
60
+ opacity: 0;
61
+ transition: none;
62
+ }
34
63
 
35
64
  .dockview-theme-light {
36
65
  --dv-paneview-active-outline-color: dodgerblue;
37
66
  --dv-tabs-and-actions-container-font-size: 13px;
38
67
  --dv-tabs-and-actions-container-height: 35px;
39
68
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
40
- --dv-drag-over-border-color: white;
69
+ --dv-drag-over-border-color: transparent;
41
70
  --dv-tabs-container-scrollbar-color: #888;
42
71
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
43
72
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
44
73
  --dv-overlay-z-index: 999;
74
+ --dv-tab-font-size: inherit;
75
+ --dv-border-radius: 0px;
76
+ --dv-tab-margin: 0;
77
+ --dv-sash-color: transparent;
78
+ --dv-active-sash-color: transparent;
45
79
  --dv-active-sash-transition-duration: 0.1s;
46
80
  --dv-active-sash-transition-delay: 0.5s;
47
81
  --dv-group-view-background-color: white;
@@ -57,6 +91,11 @@
57
91
  --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);
58
92
  --dv-separator-border: rgba(128, 128, 128, 0.35);
59
93
  --dv-paneview-header-border-color: rgb(51, 51, 51);
94
+ --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);
95
+ }
96
+ .dockview-theme-light .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
97
+ opacity: 0;
98
+ transition: none;
60
99
  }
61
100
 
62
101
  .dockview-theme-vs {
@@ -64,11 +103,16 @@
64
103
  --dv-tabs-and-actions-container-font-size: 13px;
65
104
  --dv-tabs-and-actions-container-height: 35px;
66
105
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
67
- --dv-drag-over-border-color: white;
106
+ --dv-drag-over-border-color: transparent;
68
107
  --dv-tabs-container-scrollbar-color: #888;
69
108
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
70
109
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
71
110
  --dv-overlay-z-index: 999;
111
+ --dv-tab-font-size: inherit;
112
+ --dv-border-radius: 0px;
113
+ --dv-tab-margin: 0;
114
+ --dv-sash-color: transparent;
115
+ --dv-active-sash-color: transparent;
72
116
  --dv-active-sash-transition-duration: 0.1s;
73
117
  --dv-active-sash-transition-delay: 0.5s;
74
118
  --dv-group-view-background-color: #1e1e1e;
@@ -94,6 +138,10 @@
94
138
  --dv-inactivegroup-visiblepanel-tab-color: white;
95
139
  --dv-inactivegroup-hiddenpanel-tab-color: white;
96
140
  }
141
+ .dockview-theme-vs .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
142
+ opacity: 0;
143
+ transition: none;
144
+ }
97
145
  .dockview-theme-vs .dv-groupview.dv-active-group > .dv-tabs-and-actions-container {
98
146
  box-sizing: content-box;
99
147
  border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
@@ -120,39 +168,66 @@
120
168
  --dv-tabs-and-actions-container-font-size: 13px;
121
169
  --dv-tabs-and-actions-container-height: 35px;
122
170
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
123
- --dv-drag-over-border-color: white;
171
+ --dv-drag-over-border-color: transparent;
124
172
  --dv-tabs-container-scrollbar-color: #888;
125
173
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
126
174
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
127
175
  --dv-overlay-z-index: 999;
176
+ --dv-tab-font-size: inherit;
177
+ --dv-border-radius: 0px;
178
+ --dv-tab-margin: 0;
179
+ --dv-sash-color: transparent;
180
+ --dv-active-sash-color: transparent;
128
181
  --dv-active-sash-transition-duration: 0.1s;
129
182
  --dv-active-sash-transition-delay: 0.5s;
130
- --dv-group-view-background-color: #000c18;
131
- --dv-tabs-and-actions-container-background-color: #1c1c2a;
132
- --dv-activegroup-visiblepanel-tab-background-color: #000c18;
133
- --dv-activegroup-hiddenpanel-tab-background-color: #10192c;
134
- --dv-inactivegroup-visiblepanel-tab-background-color: #000c18;
135
- --dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;
136
- --dv-tab-divider-color: #2b2b4a;
183
+ --dv-color-abyss-dark: #000c18;
184
+ --dv-color-abyss: #10192c;
185
+ --dv-color-abyss-light: #1c1c2a;
186
+ --dv-color-abyss-lighter: #2b2b4a;
187
+ --dv-color-abyss-accent: rgb(91, 30, 207);
188
+ --dv-color-abyss-primary-text: white;
189
+ --dv-color-abyss-secondary-text: rgb(148, 151, 169);
190
+ --dv-group-view-background-color: var(--dv-color-abyss-dark);
191
+ --dv-tabs-and-actions-container-background-color: var(
192
+ --dv-color-abyss-light
193
+ );
194
+ --dv-activegroup-visiblepanel-tab-background-color: var(
195
+ --dv-color-abyss-dark
196
+ );
197
+ --dv-activegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);
198
+ --dv-inactivegroup-visiblepanel-tab-background-color: var(
199
+ --dv-color-abyss-dark
200
+ );
201
+ --dv-inactivegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss);
202
+ --dv-tab-divider-color: var(--dv-color-abyss-lighter);
137
203
  --dv-activegroup-visiblepanel-tab-color: white;
138
204
  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);
139
205
  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);
140
206
  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);
141
- --dv-separator-border: #2b2b4a;
142
- --dv-paneview-header-border-color: #2b2b4a;
207
+ --dv-separator-border: var(--dv-color-abyss-lighter);
208
+ --dv-paneview-header-border-color: var(--dv-color-abyss-lighter);
143
209
  --dv-paneview-active-outline-color: #596f99;
144
210
  }
211
+ .dockview-theme-abyss .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
212
+ opacity: 0;
213
+ transition: none;
214
+ }
145
215
 
146
216
  .dockview-theme-dracula {
147
217
  --dv-paneview-active-outline-color: dodgerblue;
148
218
  --dv-tabs-and-actions-container-font-size: 13px;
149
219
  --dv-tabs-and-actions-container-height: 35px;
150
220
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
151
- --dv-drag-over-border-color: white;
221
+ --dv-drag-over-border-color: transparent;
152
222
  --dv-tabs-container-scrollbar-color: #888;
153
223
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
154
224
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
155
225
  --dv-overlay-z-index: 999;
226
+ --dv-tab-font-size: inherit;
227
+ --dv-border-radius: 0px;
228
+ --dv-tab-margin: 0;
229
+ --dv-sash-color: transparent;
230
+ --dv-active-sash-color: transparent;
156
231
  --dv-active-sash-transition-duration: 0.1s;
157
232
  --dv-active-sash-transition-delay: 0.5s;
158
233
  --dv-group-view-background-color: #282a36;
@@ -170,10 +245,14 @@
170
245
  --dv-paneview-header-border-color: #bd93f9;
171
246
  --dv-paneview-active-outline-color: #6272a4;
172
247
  }
173
- .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
248
+ .dockview-theme-dracula .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
249
+ opacity: 0;
250
+ transition: none;
251
+ }
252
+ .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
174
253
  position: relative;
175
254
  }
176
- .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {
255
+ .dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {
177
256
  position: absolute;
178
257
  left: 0px;
179
258
  top: 0px;
@@ -183,10 +262,10 @@
183
262
  background-color: #94527e;
184
263
  z-index: 999;
185
264
  }
186
- .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
265
+ .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
187
266
  position: relative;
188
267
  }
189
- .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab::after {
268
+ .dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {
190
269
  position: absolute;
191
270
  left: 0px;
192
271
  bottom: 0px;
@@ -202,13 +281,20 @@
202
281
  --dv-tabs-and-actions-container-font-size: 13px;
203
282
  --dv-tabs-and-actions-container-height: 35px;
204
283
  --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
205
- --dv-drag-over-border-color: white;
284
+ --dv-drag-over-border-color: transparent;
206
285
  --dv-tabs-container-scrollbar-color: #888;
207
286
  --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
208
287
  --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
209
288
  --dv-overlay-z-index: 999;
289
+ --dv-tab-font-size: inherit;
290
+ --dv-border-radius: 0px;
291
+ --dv-tab-margin: 0;
292
+ --dv-sash-color: transparent;
293
+ --dv-active-sash-color: transparent;
210
294
  --dv-active-sash-transition-duration: 0.1s;
211
295
  --dv-active-sash-transition-delay: 0.5s;
296
+ padding: 10px;
297
+ background-color: #ebeced;
212
298
  --dv-group-view-background-color: #ebeced;
213
299
  --dv-tabs-and-actions-container-background-color: #fcfcfc;
214
300
  --dv-activegroup-visiblepanel-tab-background-color: #f0f1f2;
@@ -222,12 +308,20 @@
222
308
  --dv-inactivegroup-hiddenpanel-tab-color: rgb(51, 51, 51);
223
309
  --dv-separator-border: transparent;
224
310
  --dv-paneview-header-border-color: rgb(51, 51, 51);
225
- --dv-separator-handle-background-color: #cfd1d3;
226
- --dv-separator-handle-hover-background-color: #babbbb;
311
+ --dv-sash-color: #cfd1d3;
312
+ --dv-active-sash-color: #babbbb;
313
+ }
314
+ .dockview-theme-replit .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
315
+ opacity: 0;
316
+ transition: none;
227
317
  }
228
318
  .dockview-theme-replit .dv-resize-container:has(> .dv-groupview) {
229
319
  border-radius: 8px;
230
320
  }
321
+ .dockview-theme-replit .dv-resize-container {
322
+ border-radius: 10px !important;
323
+ border: none;
324
+ }
231
325
  .dockview-theme-replit .dv-groupview {
232
326
  overflow: hidden;
233
327
  border-radius: 10px;
@@ -255,6 +349,9 @@
255
349
  .dockview-theme-replit .dv-groupview.dv-inactive-group {
256
350
  border: 1px solid transparent;
257
351
  }
352
+ .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash {
353
+ background-color: transparent;
354
+ }
258
355
  .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::after {
259
356
  content: "";
260
357
  height: 4px;
@@ -263,11 +360,17 @@
263
360
  top: 50%;
264
361
  left: 50%;
265
362
  transform: translate(-50%, -50%);
266
- background-color: var(--dv-separator-handle-background-color);
363
+ background-color: var(--dv-sash-color);
267
364
  position: absolute;
268
365
  }
269
- .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after {
270
- background-color: var(--dv-separator-handle-hover-background-color);
366
+ .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active {
367
+ background-color: transparent;
368
+ }
369
+ .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active::after {
370
+ background-color: var(--dv-active-sash-color);
371
+ }
372
+ .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash {
373
+ background-color: transparent;
271
374
  }
272
375
  .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {
273
376
  content: "";
@@ -277,14 +380,224 @@
277
380
  top: 50%;
278
381
  left: 50%;
279
382
  transform: translate(-50%, -50%);
280
- background-color: var(--dv-separator-handle-background-color);
383
+ background-color: var(--dv-sash-color);
384
+ position: absolute;
385
+ }
386
+ .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active {
387
+ background-color: transparent;
388
+ }
389
+ .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after, .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active::after {
390
+ background-color: var(--dv-active-sash-color);
391
+ }
392
+
393
+ .dockview-theme-abyss-spaced {
394
+ --dv-paneview-active-outline-color: dodgerblue;
395
+ --dv-tabs-and-actions-container-font-size: 13px;
396
+ --dv-tabs-and-actions-container-height: 35px;
397
+ --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
398
+ --dv-drag-over-border-color: transparent;
399
+ --dv-tabs-container-scrollbar-color: #888;
400
+ --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
401
+ --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
402
+ --dv-overlay-z-index: 999;
403
+ --dv-tab-font-size: inherit;
404
+ --dv-border-radius: 0px;
405
+ --dv-tab-margin: 0;
406
+ --dv-sash-color: transparent;
407
+ --dv-active-sash-color: transparent;
408
+ --dv-active-sash-transition-duration: 0.1s;
409
+ --dv-active-sash-transition-delay: 0.5s;
410
+ --dv-tab-font-size: 12px;
411
+ --dv-border-radius: 20px;
412
+ --dv-tab-margin: 0.5rem 0.25rem;
413
+ --dv-tabs-and-actions-container-height: 44px;
414
+ --dv-border-radius: 20px;
415
+ --dv-color-abyss-dark: rgb(11, 6, 17);
416
+ --dv-color-abyss: #16121f;
417
+ --dv-color-abyss-light: #201d2b;
418
+ --dv-color-abyss-lighter: #2a2837;
419
+ --dv-color-abyss-accent: rgb(91, 30, 207);
420
+ --dv-color-abyss-primary-text: white;
421
+ --dv-color-abyss-secondary-text: rgb(148, 151, 169);
422
+ --dv-drag-over-border: 2px solid var(--dv-color-abyss-accent);
423
+ --dv-drag-over-background-color: "";
424
+ --dv-group-view-background-color: var(--dv-color-abyss-dark);
425
+ --dv-tabs-and-actions-container-background-color: var(--dv-color-abyss);
426
+ --dv-activegroup-visiblepanel-tab-background-color: var(
427
+ --dv-color-abyss-lighter
428
+ );
429
+ --dv-activegroup-hiddenpanel-tab-background-color: var(
430
+ --dv-color-abyss-light
431
+ );
432
+ --dv-inactivegroup-visiblepanel-tab-background-color: var(
433
+ --dv-color-abyss-lighter
434
+ );
435
+ --dv-inactivegroup-hiddenpanel-tab-background-color: var(
436
+ --dv-color-abyss-light
437
+ );
438
+ --dv-tab-divider-color: transparent;
439
+ --dv-activegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);
440
+ --dv-activegroup-hiddenpanel-tab-color: var(
441
+ --dv-color-abyss-secondary-text
442
+ );
443
+ --dv-inactivegroup-visiblepanel-tab-color: var(
444
+ --dv-color-abyss-primary-text
445
+ );
446
+ --dv-inactivegroup-hiddenpanel-tab-color: var(
447
+ --dv-color-abyss-secondary-text
448
+ );
449
+ --dv-separator-border: transparent;
450
+ --dv-paneview-header-border-color: rgb(51, 51, 51);
451
+ --dv-active-sash-color: var(--dv-color-abyss-accent);
452
+ --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.5);
453
+ padding: 10px;
454
+ background-color: var(--dv-color-abyss-dark);
455
+ }
456
+ .dockview-theme-abyss-spaced .dv-resize-container:has(> .dv-groupview) {
457
+ border-radius: 8px;
458
+ }
459
+ .dockview-theme-abyss-spaced .dv-sash {
460
+ border-radius: 4px;
461
+ }
462
+ .dockview-theme-abyss-spaced .dv-drop-target-anchor {
463
+ border-radius: calc(var(--dv-border-radius) / 4);
464
+ }
465
+ .dockview-theme-abyss-spaced .dv-drop-target-anchor.dv-drop-target-content {
466
+ border-radius: var(--dv-border-radius);
467
+ }
468
+ .dockview-theme-abyss-spaced .dv-resize-container {
469
+ border-radius: var(--dv-border-radius) !important;
470
+ border: none;
471
+ }
472
+ .dockview-theme-abyss-spaced .dv-tabs-overflow-container,
473
+ .dockview-theme-abyss-spaced .dv-tabs-overflow-dropdown-default {
474
+ border-radius: 8px;
475
+ height: unset !important;
476
+ }
477
+ .dockview-theme-abyss-spaced .dv-tab {
478
+ border-radius: 8px;
479
+ }
480
+ .dockview-theme-abyss-spaced .dv-tab .dv-svg {
481
+ height: 8px;
482
+ width: 8px;
483
+ }
484
+ .dockview-theme-abyss-spaced .dv-groupview {
485
+ border-radius: var(--dv-border-radius);
486
+ }
487
+ .dockview-theme-abyss-spaced .dv-groupview .dv-tabs-and-actions-container {
488
+ padding: 0px calc(var(--dv-border-radius) / 2);
489
+ }
490
+ .dockview-theme-abyss-spaced .dv-groupview .dv-content-container {
491
+ background-color: var(--dv-tabs-and-actions-container-background-color);
492
+ }
493
+ .dockview-theme-abyss-spaced .dv-resize-container .dv-groupview {
494
+ border: 2px solid var(--dv-color-abyss-dark);
495
+ }
496
+
497
+ .dockview-theme-light-spaced {
498
+ --dv-paneview-active-outline-color: dodgerblue;
499
+ --dv-tabs-and-actions-container-font-size: 13px;
500
+ --dv-tabs-and-actions-container-height: 35px;
501
+ --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
502
+ --dv-drag-over-border-color: transparent;
503
+ --dv-tabs-container-scrollbar-color: #888;
504
+ --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
505
+ --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
506
+ --dv-overlay-z-index: 999;
507
+ --dv-tab-font-size: inherit;
508
+ --dv-border-radius: 0px;
509
+ --dv-tab-margin: 0;
510
+ --dv-sash-color: transparent;
511
+ --dv-active-sash-color: transparent;
512
+ --dv-active-sash-transition-duration: 0.1s;
513
+ --dv-active-sash-transition-delay: 0.5s;
514
+ --dv-tab-font-size: 12px;
515
+ --dv-border-radius: 20px;
516
+ --dv-tab-margin: 0.5rem 0.25rem;
517
+ --dv-tabs-and-actions-container-height: 44px;
518
+ --dv-border-radius: 20px;
519
+ --dv-drag-over-border: 2px solid rgb(91, 30, 207);
520
+ --dv-drag-over-background-color: "";
521
+ --dv-group-view-background-color: #f6f5f9;
522
+ --dv-tabs-and-actions-container-background-color: white;
523
+ --dv-activegroup-visiblepanel-tab-background-color: #ededf0;
524
+ --dv-activegroup-hiddenpanel-tab-background-color: #f9f9fa;
525
+ --dv-inactivegroup-visiblepanel-tab-background-color: #ededf0;
526
+ --dv-inactivegroup-hiddenpanel-tab-background-color: #f9f9fa;
527
+ --dv-tab-divider-color: transparent;
528
+ --dv-activegroup-visiblepanel-tab-color: rgb(104, 107, 130);
529
+ --dv-activegroup-hiddenpanel-tab-color: rgb(148, 151, 169);
530
+ --dv-inactivegroup-visiblepanel-tab-color: rgb(104, 107, 130);
531
+ --dv-inactivegroup-hiddenpanel-tab-color: rgb(148, 151, 169);
532
+ --dv-separator-border: transparent;
533
+ --dv-paneview-header-border-color: rgb(51, 51, 51);
534
+ --dv-active-sash-color: rgb(91, 30, 207);
535
+ --dv-floating-box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.1);
536
+ padding: 10px;
537
+ background-color: #f6f5f9;
538
+ --dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);
539
+ }
540
+ .dockview-theme-light-spaced .dv-resize-container:has(> .dv-groupview) {
541
+ border-radius: 8px;
542
+ }
543
+ .dockview-theme-light-spaced .dv-sash {
544
+ border-radius: 4px;
545
+ }
546
+ .dockview-theme-light-spaced .dv-drop-target-anchor {
547
+ border-radius: calc(var(--dv-border-radius) / 4);
548
+ }
549
+ .dockview-theme-light-spaced .dv-drop-target-anchor.dv-drop-target-content {
550
+ border-radius: var(--dv-border-radius);
551
+ }
552
+ .dockview-theme-light-spaced .dv-resize-container {
553
+ border-radius: var(--dv-border-radius) !important;
554
+ border: none;
555
+ }
556
+ .dockview-theme-light-spaced .dv-tabs-overflow-container,
557
+ .dockview-theme-light-spaced .dv-tabs-overflow-dropdown-default {
558
+ border-radius: 8px;
559
+ height: unset !important;
560
+ }
561
+ .dockview-theme-light-spaced .dv-tab {
562
+ border-radius: 8px;
563
+ }
564
+ .dockview-theme-light-spaced .dv-tab .dv-svg {
565
+ height: 8px;
566
+ width: 8px;
567
+ }
568
+ .dockview-theme-light-spaced .dv-groupview {
569
+ border-radius: var(--dv-border-radius);
570
+ }
571
+ .dockview-theme-light-spaced .dv-groupview .dv-tabs-and-actions-container {
572
+ padding: 0px calc(var(--dv-border-radius) / 2);
573
+ }
574
+ .dockview-theme-light-spaced .dv-groupview .dv-content-container {
575
+ background-color: var(--dv-tabs-and-actions-container-background-color);
576
+ }
577
+ .dockview-theme-light-spaced .dv-resize-container .dv-groupview {
578
+ border: 2px solid rgba(255, 255, 255, 0.1);
579
+ }
580
+ .dv-drop-target-container {
281
581
  position: absolute;
582
+ z-index: 9999;
583
+ top: 0px;
584
+ left: 0px;
585
+ height: 100%;
586
+ width: 100%;
587
+ pointer-events: none;
588
+ overflow: hidden;
589
+ --dv-transition-duration: 300ms;
282
590
  }
283
- .dockview-theme-replit .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after {
284
- background-color: var(--dv-separator-handle-hover-background-color);
591
+ .dv-drop-target-container .dv-drop-target-anchor {
592
+ position: relative;
593
+ border: var(--dv-drag-over-border);
594
+ transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;
595
+ background-color: var(--dv-drag-over-background-color);
596
+ opacity: 1;
285
597
  }
286
598
  .dv-drop-target {
287
599
  position: relative;
600
+ --dv-transition-duration: 70ms;
288
601
  }
289
602
  .dv-drop-target > .dv-drop-target-dropzone {
290
603
  position: absolute;
@@ -300,8 +613,9 @@
300
613
  box-sizing: border-box;
301
614
  height: 100%;
302
615
  width: 100%;
616
+ border: var(--dv-drag-over-border);
303
617
  background-color: var(--dv-drag-over-background-color);
304
- transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;
618
+ transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out;
305
619
  will-change: transform;
306
620
  pointer-events: none;
307
621
  }
@@ -333,19 +647,19 @@
333
647
  position: relative;
334
648
  }
335
649
 
336
- .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
650
+ .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
337
651
  background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
338
652
  color: var(--dv-activegroup-visiblepanel-tab-color);
339
653
  }
340
- .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {
654
+ .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {
341
655
  background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
342
656
  color: var(--dv-activegroup-hiddenpanel-tab-color);
343
657
  }
344
- .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-active-tab {
658
+ .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
345
659
  background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
346
660
  color: var(--dv-inactivegroup-visiblepanel-tab-color);
347
661
  }
348
- .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab.dv-inactive-tab {
662
+ .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {
349
663
  background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
350
664
  color: var(--dv-inactivegroup-hiddenpanel-tab-color);
351
665
  }
@@ -681,6 +995,7 @@
681
995
  -moz-user-select: none;
682
996
  -ms-user-select: none;
683
997
  touch-action: none;
998
+ background-color: var(--dv-sash-color, transparent);
684
999
  }
685
1000
  .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):active, .dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {
686
1001
  background-color: var(--dv-active-sash-color, transparent);
@@ -747,15 +1062,13 @@
747
1062
  position: relative;
748
1063
  height: 100%;
749
1064
  display: flex;
750
- min-width: 80px;
751
1065
  align-items: center;
752
- padding: 0px 8px;
753
1066
  white-space: nowrap;
754
1067
  text-overflow: ellipsis;
755
1068
  }
756
1069
  .dv-tab .dv-default-tab .dv-default-tab-content {
757
- padding: 0px 8px;
758
1070
  flex-grow: 1;
1071
+ margin-right: 4px;
759
1072
  }
760
1073
  .dv-tab .dv-default-tab .dv-default-tab-action {
761
1074
  padding: 4px;
@@ -768,6 +1081,79 @@
768
1081
  border-radius: 2px;
769
1082
  background-color: var(--dv-icon-hover-background-color);
770
1083
  }
1084
+ .dv-tabs-overflow-dropdown-default {
1085
+ height: 100%;
1086
+ color: var(--dv-activegroup-hiddenpanel-tab-color);
1087
+ margin: var(--dv-tab-margin);
1088
+ display: flex;
1089
+ align-items: center;
1090
+ flex-shrink: 0;
1091
+ padding: 0.25rem 0.5rem;
1092
+ cursor: pointer;
1093
+ }
1094
+ .dv-tabs-overflow-dropdown-default > span {
1095
+ padding-left: 0.25rem;
1096
+ }
1097
+ .dv-tabs-overflow-dropdown-default > svg {
1098
+ transform: rotate(90deg);
1099
+ }
1100
+ .dv-tabs-container {
1101
+ display: flex;
1102
+ height: 100%;
1103
+ overflow: hidden;
1104
+ scrollbar-width: thin;
1105
+ /* Track */
1106
+ /* Handle */
1107
+ }
1108
+ .dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before {
1109
+ content: " ";
1110
+ position: absolute;
1111
+ top: 0;
1112
+ left: 0;
1113
+ z-index: 5;
1114
+ pointer-events: none;
1115
+ background-color: var(--dv-tab-divider-color);
1116
+ width: 1px;
1117
+ height: 100%;
1118
+ }
1119
+ .dv-tabs-container::-webkit-scrollbar {
1120
+ height: 3px;
1121
+ }
1122
+ .dv-tabs-container::-webkit-scrollbar-track {
1123
+ background: transparent;
1124
+ }
1125
+ .dv-tabs-container::-webkit-scrollbar-thumb {
1126
+ background: var(--dv-tabs-container-scrollbar-color);
1127
+ }
1128
+
1129
+ .dv-tab {
1130
+ -webkit-user-drag: element;
1131
+ outline: none;
1132
+ padding: 0.25rem 0.5rem;
1133
+ cursor: pointer;
1134
+ position: relative;
1135
+ box-sizing: border-box;
1136
+ font-size: var(--dv-tab-font-size);
1137
+ margin: var(--dv-tab-margin);
1138
+ }
1139
+
1140
+ .dv-tabs-overflow-container {
1141
+ flex-direction: column;
1142
+ height: unset;
1143
+ border: 1px solid var(--dv-tab-divider-color);
1144
+ background-color: var(--dv-group-view-background-color);
1145
+ }
1146
+ .dv-tabs-overflow-container .dv-tab:not(:last-child) {
1147
+ border-bottom: 1px solid var(--dv-tab-divider-color);
1148
+ }
1149
+ .dv-tabs-overflow-container .dv-active-tab {
1150
+ background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
1151
+ color: var(--dv-activegroup-visiblepanel-tab-color);
1152
+ }
1153
+ .dv-tabs-overflow-container .dv-inactive-tab {
1154
+ background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
1155
+ color: var(--dv-activegroup-hiddenpanel-tab-color);
1156
+ }
771
1157
  .dv-tabs-and-actions-container {
772
1158
  display: flex;
773
1159
  background-color: var(--dv-tabs-and-actions-container-background-color);
@@ -781,6 +1167,7 @@
781
1167
  }
782
1168
  .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {
783
1169
  flex-grow: 1;
1170
+ padding: 0px;
784
1171
  }
785
1172
  .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {
786
1173
  flex-grow: 0;
@@ -790,41 +1177,8 @@
790
1177
  flex-grow: 1;
791
1178
  cursor: grab;
792
1179
  }
793
- .dv-tabs-and-actions-container .dv-tabs-container {
1180
+ .dv-tabs-and-actions-container .dv-right-actions-container {
794
1181
  display: flex;
795
- overflow-x: overlay;
796
- overflow-y: hidden;
797
- scrollbar-width: thin;
798
- /* Track */
799
- /* Handle */
800
- }
801
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar {
802
- height: 3px;
803
- }
804
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-track {
805
- background: transparent;
806
- }
807
- .dv-tabs-and-actions-container .dv-tabs-container::-webkit-scrollbar-thumb {
808
- background: var(--dv-tabs-container-scrollbar-color);
809
- }
810
- .dv-tabs-and-actions-container .dv-tabs-container .dv-tab {
811
- -webkit-user-drag: element;
812
- outline: none;
813
- min-width: 75px;
814
- cursor: pointer;
815
- position: relative;
816
- box-sizing: border-box;
817
- }
818
- .dv-tabs-and-actions-container .dv-tabs-container .dv-tab:not(:first-child)::before {
819
- content: " ";
820
- position: absolute;
821
- top: 0;
822
- left: 0;
823
- z-index: 5;
824
- pointer-events: none;
825
- background-color: var(--dv-tab-divider-color);
826
- width: 1px;
827
- height: 100%;
828
1182
  }
829
1183
  .dv-watermark {
830
1184
  display: flex;
@@ -1,4 +1,4 @@
1
- import type { DockviewGroupPanel, GroupPanelPartInitParameters, IContentRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabRenderer, IWatermarkRenderer, PanelUpdateEvent, Parameters, WatermarkRendererInitParameters } from 'dockview-core';
1
+ import type { DockviewGroupPanel, IContentRenderer, IGroupHeaderProps, IHeaderActionsRenderer, ITabRenderer, IWatermarkRenderer, PanelUpdateEvent, Parameters, TabPartInitParameters, WatermarkRendererInitParameters } from 'dockview-core';
2
2
  import { type ComponentOptionsBase, type DefineComponent, type ComponentInternalInstance } from 'vue';
3
3
  export type ComponentInterface = ComponentOptionsBase<any, any, any, any, any, any, any, any>;
4
4
  export type VueComponent<T = any> = DefineComponent<T>;
@@ -22,7 +22,7 @@ export declare class VueRenderer extends AbstractVueRenderer implements ITabRend
22
22
  private _renderDisposable;
23
23
  private _api;
24
24
  private _containerApi;
25
- init(parameters: GroupPanelPartInitParameters): void;
25
+ init(parameters: TabPartInitParameters): void;
26
26
  update(event: PanelUpdateEvent<Parameters>): void;
27
27
  dispose(): void;
28
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dockview-vue",
3
- "version": "3.2.0",
3
+ "version": "4.0.1",
4
4
  "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
5
5
  "keywords": [
6
6
  "splitview",
@@ -52,7 +52,7 @@
52
52
  "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-vue --coverage"
53
53
  },
54
54
  "dependencies": {
55
- "dockview-core": "^3.2.0"
55
+ "dockview-core": "^4.0.1"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "vue": "^3.4.0"