Skip to content

Commit ea5bed8

Browse files
userNameuserName
userName
authored and
userName
committed
refactor: dockview update to V4.0.1
1 parent 1ce1af8 commit ea5bed8

4 files changed

Lines changed: 75 additions & 72 deletions

File tree

‎src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,3 +277,10 @@
277277
.bb-dockview .dv-resize-container-drawer {
278278
height: calc(100% + 1px) !important;
279279
}
280+
281+
.bb-dockview .dv-tabs-and-actions-container:has(.dropdown-item) .dv-scrollbar-horizontal {
282+
display: none;
283+
}
284+
.bb-dockview .dv-scrollable {
285+
width: initial;
286+
}

‎src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css‎

Lines changed: 60 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.dv-scrollable {
22
position: relative;
33
overflow: hidden;
4+
width: 100%;
45
}
56
.dv-scrollable .dv-scrollbar-horizontal {
67
position: absolute;
@@ -576,6 +577,60 @@
576577
.dockview-theme-light-spaced .dv-resize-container .dv-groupview {
577578
border: 2px solid rgba(255, 255, 255, 0.1);
578579
}
580+
.dv-drop-target {
581+
position: relative;
582+
--dv-transition-duration: 70ms;
583+
}
584+
.dv-drop-target > .dv-drop-target-dropzone {
585+
position: absolute;
586+
left: 0px;
587+
top: 0px;
588+
height: 100%;
589+
width: 100%;
590+
z-index: 1000;
591+
pointer-events: none;
592+
}
593+
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {
594+
position: relative;
595+
box-sizing: border-box;
596+
height: 100%;
597+
width: 100%;
598+
border: var(--dv-drag-over-border);
599+
background-color: var(--dv-drag-over-background-color);
600+
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;
601+
will-change: transform;
602+
pointer-events: none;
603+
}
604+
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {
605+
border-top: 1px solid var(--dv-drag-over-border-color);
606+
}
607+
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {
608+
border-bottom: 1px solid var(--dv-drag-over-border-color);
609+
}
610+
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {
611+
border-left: 1px solid var(--dv-drag-over-border-color);
612+
}
613+
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
614+
border-right: 1px solid var(--dv-drag-over-border-color);
615+
}
616+
.dv-drop-target-container {
617+
position: absolute;
618+
z-index: 9999;
619+
top: 0px;
620+
left: 0px;
621+
height: 100%;
622+
width: 100%;
623+
pointer-events: none;
624+
overflow: hidden;
625+
--dv-transition-duration: 300ms;
626+
}
627+
.dv-drop-target-container .dv-drop-target-anchor {
628+
position: relative;
629+
border: var(--dv-drag-over-border);
630+
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;
631+
background-color: var(--dv-drag-over-background-color);
632+
opacity: 1;
633+
}
579634
.dv-dockview {
580635
position: relative;
581636
background-color: var(--dv-group-view-background-color);
@@ -632,59 +687,14 @@
632687
min-height: 0;
633688
outline: none;
634689
}
635-
.dv-drop-target {
636-
position: relative;
637-
--dv-transition-duration: 70ms;
638-
}
639-
.dv-drop-target > .dv-drop-target-dropzone {
640-
position: absolute;
641-
left: 0px;
642-
top: 0px;
643-
height: 100%;
644-
width: 100%;
645-
z-index: 1000;
646-
pointer-events: none;
647-
}
648-
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {
649-
position: relative;
650-
box-sizing: border-box;
690+
.dv-root-wrapper {
651691
height: 100%;
652692
width: 100%;
653-
border: var(--dv-drag-over-border);
654-
background-color: var(--dv-drag-over-background-color);
655-
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;
656-
will-change: transform;
657-
pointer-events: none;
658-
}
659-
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {
660-
border-top: 1px solid var(--dv-drag-over-border-color);
661-
}
662-
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {
663-
border-bottom: 1px solid var(--dv-drag-over-border-color);
664-
}
665-
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {
666-
border-left: 1px solid var(--dv-drag-over-border-color);
667-
}
668-
.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
669-
border-right: 1px solid var(--dv-drag-over-border-color);
670693
}
671-
.dv-drop-target-container {
672-
position: absolute;
673-
z-index: 9999;
674-
top: 0px;
675-
left: 0px;
694+
.dv-grid-view,
695+
.dv-branch-node {
676696
height: 100%;
677697
width: 100%;
678-
pointer-events: none;
679-
overflow: hidden;
680-
--dv-transition-duration: 300ms;
681-
}
682-
.dv-drop-target-container .dv-drop-target-anchor {
683-
position: relative;
684-
border: var(--dv-drag-over-border);
685-
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;
686-
background-color: var(--dv-drag-over-background-color);
687-
opacity: 1;
688698
}
689699
.dv-debug .dv-resize-container .dv-resize-handle-top {
690700
background-color: red;
@@ -804,15 +814,6 @@
804814
outline: 1px solid red;
805815
outline-offset: -1;
806816
}
807-
.dv-root-wrapper {
808-
height: 100%;
809-
width: 100%;
810-
}
811-
.dv-grid-view,
812-
.dv-branch-node {
813-
height: 100%;
814-
width: 100%;
815-
}
816817
.dv-pane-container {
817818
height: 100%;
818819
width: 100%;
@@ -1104,13 +1105,7 @@
11041105
/* Track */
11051106
/* Handle */
11061107
}
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 {
1108+
.dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before {
11141109
content: " ";
11151110
position: absolute;
11161111
top: 0;
@@ -1172,6 +1167,7 @@
11721167
}
11731168
.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {
11741169
flex-grow: 1;
1170+
padding: 0px;
11751171
}
11761172
.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {
11771173
flex-grow: 0;

‎src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* dockview-core
3-
* @version 4.0.0
3+
* @version 4.0.1
44
* @link https://github.com/mathuo/dockview
55
* @license MIT
66
*/

‎src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,11 @@ const initDockview = (dockview, options, template) => {
110110
observeFloatingGroupLocationChange(fg.group)
111111
})
112112

113-
dockview._inited = true;
114-
dockview._initialized?.fire();
115113
dockview.groups.forEach(group => {
116114
observeGroup(group)
117115
})
116+
dockview._inited = true;
117+
dockview._initialized?.fire();
118118
}, 100);
119119
})
120120

@@ -166,10 +166,10 @@ const setWidth = (target, dockview) => {
166166
let dropMenu = dropdown.querySelector('.dropdown-menu')
167167
if (voidWidth === 0) {
168168
if (tabsContainer.children.length <= 1) return
169-
const inactiveTabs = header.querySelectorAll('.dv-tabs-container>.dv-tab')
170-
for (let i = inactiveTabs.length - 1; i >= 0; i--) {
171-
const lastTab = inactiveTabs[i]
172-
if (lastTab.offsetLeft + lastTab.offsetWidth > lastTab.offsetParent.offsetWidth) {
169+
const tabs = tabsContainer.querySelectorAll('.dv-tab')
170+
for (let i = tabs.length - 1; i >= 0; i--) {
171+
const lastTab = tabs[i]
172+
if (lastTab.offsetLeft + lastTab.offsetWidth > tabsContainer.offsetWidth) {
173173
const aEle = document.createElement('a')
174174
const liEle = document.createElement('li')
175175
aEle.className = 'dropdown-item'
@@ -190,7 +190,7 @@ const setWidth = (target, dockview) => {
190190
}
191191
}
192192
}
193-
if ([...tabsContainer.children].every(tab => tab.classList.contains('dv-inactive-tab'))) {
193+
if (dockview._inited && [...tabsContainer.children].every(tab => tab.classList.contains('dv-inactive-tab'))) {
194194
const group = dockview.groups.find(g => g.element === header.parentElement)
195195
group.panels[0].api.setActive()
196196
}

0 commit comments

Comments
 (0)