dockview-vue 3.2.0 → 4.0.0

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