rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-02 14:35:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #688 from mathuo/687-css-class-prefixing

Browse Source 
chore: rename classes to start with dv-
This commit is contained in:
mathuo 2024-10-26 21:57:54 +01:00 committed by GitHub
commit e0744531ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
34 changed files with 306 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts
View File

@ -53,7 +53,7 @@ describe('droptarget', () => {
fireEvent.dragOver(element); fireEvent.dragOver(element);
const target = element.querySelector( const target = element.querySelector(
'.drop-target-dropzone' '.dv-drop-target-dropzone'
) as HTMLElement; ) as HTMLElement;
fireEvent.drop(target); fireEvent.drop(target);
expect(position).toBe('center'); expect(position).toBe('center');
@ -61,7 +61,7 @@ describe('droptarget', () => {
const event = new Event('dragover'); const event = new Event('dragover');
(event as any)['__dockview_droptarget_event_is_used__'] = true; (event as any)['__dockview_droptarget_event_is_used__'] = true;
fireEvent(element, event); fireEvent(element, event);
expect(element.querySelector('.drop-target-dropzone')).toBeNull(); expect(element.querySelector('.dv-drop-target-dropzone')).toBeNull();
}); });
test('directionToPosition', () => { test('directionToPosition', () => {
@ -102,7 +102,7 @@ describe('droptarget', () => {
fireEvent.dragOver(element); fireEvent.dragOver(element);
const target = element.querySelector( const target = element.querySelector(
'.drop-target-dropzone' '.dv-drop-target-dropzone'
) as HTMLElement; ) as HTMLElement;
fireEvent.drop(target); fireEvent.drop(target);
expect(position).toBe('center'); expect(position).toBe('center');
@ -124,7 +124,7 @@ describe('droptarget', () => {
fireEvent.dragOver(element); fireEvent.dragOver(element);
const target = element.querySelector( const target = element.querySelector(
'.drop-target-dropzone' '.dv-drop-target-dropzone'
) as HTMLElement; ) as HTMLElement;
jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100); jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100);
@ -155,12 +155,12 @@ describe('droptarget', () => {
fireEvent.dragOver(element); fireEvent.dragOver(element);
let viewQuery = element.querySelectorAll( let viewQuery = element.querySelectorAll(
'.drop-target > .drop-target-dropzone > .drop-target-selection' '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
const target = element.querySelector( const target = element.querySelector(
'.drop-target-dropzone' '.dv-drop-target-dropzone'
) as HTMLElement; ) as HTMLElement;
jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100); jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100);
@ -187,13 +187,13 @@ describe('droptarget', () => {
} }
viewQuery = element.querySelectorAll( viewQuery = element.querySelectorAll(
'.drop-target > .drop-target-dropzone > .drop-target-selection' '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
expect(droptarget.state).toBe('left'); expect(droptarget.state).toBe('left');
check( check(
element element
.getElementsByClassName('drop-target-selection') .getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement, .item(0) as HTMLDivElement,
{ {
top: '0px', top: '0px',
@ -209,13 +209,13 @@ describe('droptarget', () => {
); );
viewQuery = element.querySelectorAll( viewQuery = element.querySelectorAll(
'.drop-target > .drop-target-dropzone > .drop-target-selection' '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
expect(droptarget.state).toBe('top'); expect(droptarget.state).toBe('top');
check( check(
element element
.getElementsByClassName('drop-target-selection') .getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement, .item(0) as HTMLDivElement,
{ {
top: '0px', top: '0px',
@ -231,13 +231,13 @@ describe('droptarget', () => {
); );
viewQuery = element.querySelectorAll( viewQuery = element.querySelectorAll(
'.drop-target > .drop-target-dropzone > .drop-target-selection' '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
expect(droptarget.state).toBe('bottom'); expect(droptarget.state).toBe('bottom');
check( check(
element element
.getElementsByClassName('drop-target-selection') .getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement, .item(0) as HTMLDivElement,
{ {
top: '50%', top: '50%',
@ -253,13 +253,13 @@ describe('droptarget', () => {
); );
viewQuery = element.querySelectorAll( viewQuery = element.querySelectorAll(
'.drop-target > .drop-target-dropzone > .drop-target-selection' '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
expect(droptarget.state).toBe('right'); expect(droptarget.state).toBe('right');
check( check(
element element
.getElementsByClassName('drop-target-selection') .getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement, .item(0) as HTMLDivElement,
{ {
top: '0px', top: '0px',
@ -276,14 +276,14 @@ describe('droptarget', () => {
expect( expect(
( (
element element
.getElementsByClassName('drop-target-selection') .getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement .item(0) as HTMLDivElement
).style.transform ).style.transform
).toBe(''); ).toBe('');
fireEvent.dragLeave(target); fireEvent.dragLeave(target);
expect(droptarget.state).toBe('center'); expect(droptarget.state).toBe('center');
viewQuery = element.querySelectorAll('.drop-target'); viewQuery = element.querySelectorAll('.dv-drop-target');
expect(viewQuery.length).toBe(0); expect(viewQuery.length).toBe(0);
}); });

16
packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts
View File

@ -20,7 +20,7 @@ describe('tab', () => {
new groupMock() new groupMock()
); );
expect(cut.element.className).toBe('tab inactive-tab'); expect(cut.element.className).toBe('dv-tab dv-inactive-tab');
}); });
test('that active tab has active-tab class', () => { test('that active tab has active-tab class', () => {
@ -34,10 +34,10 @@ describe('tab', () => {
); );
cut.setActive(true); cut.setActive(true);
expect(cut.element.className).toBe('tab active-tab'); expect(cut.element.className).toBe('dv-tab dv-active-tab');
cut.setActive(false); cut.setActive(false);
expect(cut.element.className).toBe('tab inactive-tab'); expect(cut.element.className).toBe('dv-tab dv-inactive-tab');
}); });
test('that an external event does not render a drop target and calls through to the group model', () => { test('that an external event does not render a drop target and calls through to the group model', () => {
@ -85,7 +85,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalled(); expect(groupView.canDisplayOverlay).toBeCalled();
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -139,7 +139,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalledTimes(0); expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -193,7 +193,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalledTimes(0); expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1); ).toBe(1);
}); });
@ -253,7 +253,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalledTimes(1); expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -313,7 +313,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalledTimes(1); expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
}); });

66
packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
View File

@ -40,7 +40,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel); const cut = new TabsContainer(accessor, groupPanel);
const emptySpace = cut.element const emptySpace = cut.element
.getElementsByClassName('void-container') .getElementsByClassName('dv-void-container')
.item(0); .item(0);
if (!emptySpace!) { if (!emptySpace!) {
@ -60,7 +60,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalled(); expect(groupView.canDisplayOverlay).toHaveBeenCalled();
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -95,7 +95,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel); const cut = new TabsContainer(accessor, groupPanel);
const emptySpace = cut.element const emptySpace = cut.element
.getElementsByClassName('void-container') .getElementsByClassName('dv-void-container')
.item(0); .item(0);
if (!emptySpace!) { if (!emptySpace!) {
@ -126,7 +126,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0); expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1); ).toBe(1);
}); });
@ -164,7 +164,7 @@ describe('tabsContainer', () => {
cut.openPanel(new TestPanel('panel2', jest.fn() as any)); cut.openPanel(new TestPanel('panel2', jest.fn() as any));
const emptySpace = cut.element const emptySpace = cut.element
.getElementsByClassName('void-container') .getElementsByClassName('dv-void-container')
.item(0); .item(0);
if (!emptySpace!) { if (!emptySpace!) {
@ -189,7 +189,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0); expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1); ).toBe(1);
}); });
@ -227,7 +227,7 @@ describe('tabsContainer', () => {
cut.openPanel(new TestPanel('panel2', jest.fn() as any)); cut.openPanel(new TestPanel('panel2', jest.fn() as any));
const emptySpace = cut.element const emptySpace = cut.element
.getElementsByClassName('void-container') .getElementsByClassName('dv-void-container')
.item(0); .item(0);
if (!emptySpace!) { if (!emptySpace!) {
@ -252,7 +252,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0); expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1); ).toBe(1);
}); });
@ -289,7 +289,7 @@ describe('tabsContainer', () => {
cut.openPanel(new TestPanel('panel2', jest.fn() as any)); cut.openPanel(new TestPanel('panel2', jest.fn() as any));
const emptySpace = cut.element const emptySpace = cut.element
.getElementsByClassName('void-container') .getElementsByClassName('dv-void-container')
.item(0); .item(0);
if (!emptySpace!) { if (!emptySpace!) {
@ -320,7 +320,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(1); expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(1);
expect( expect(
cut.element.getElementsByClassName('drop-target-dropzone').length cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -341,7 +341,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel); const cut = new TabsContainer(accessor, groupPanel);
let query = cut.element.querySelectorAll( let query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .left-actions-container' '.dv-tabs-and-actions-container > .dv-left-actions-container'
); );
expect(query.length).toBe(1); expect(query.length).toBe(1);
@ -354,7 +354,7 @@ describe('tabsContainer', () => {
cut.setLeftActionsElement(left); cut.setLeftActionsElement(left);
query = cut.element.querySelectorAll( query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .left-actions-container' '.dv-tabs-and-actions-container > .dv-left-actions-container'
); );
expect(query.length).toBe(1); expect(query.length).toBe(1);
expect(query[0].children.item(0)?.className).toBe( expect(query[0].children.item(0)?.className).toBe(
@ -369,7 +369,7 @@ describe('tabsContainer', () => {
cut.setLeftActionsElement(left2); cut.setLeftActionsElement(left2);
query = cut.element.querySelectorAll( query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .left-actions-container' '.dv-tabs-and-actions-container > .dv-left-actions-container'
); );
expect(query.length).toBe(1); expect(query.length).toBe(1);
expect(query[0].children.item(0)?.className).toBe( expect(query[0].children.item(0)?.className).toBe(
@ -381,7 +381,7 @@ describe('tabsContainer', () => {
cut.setLeftActionsElement(undefined); cut.setLeftActionsElement(undefined);
query = cut.element.querySelectorAll( query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .left-actions-container' '.dv-tabs-and-actions-container > .dv-left-actions-container'
); );
expect(query.length).toBe(1); expect(query.length).toBe(1);
@ -405,7 +405,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel); const cut = new TabsContainer(accessor, groupPanel);
let query = cut.element.querySelectorAll( let query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .right-actions-container' '.dv-tabs-and-actions-container > .dv-right-actions-container'
); );
expect(query.length).toBe(1); expect(query.length).toBe(1);
@ -418,7 +418,7 @@ describe('tabsContainer', () => {
cut.setRightActionsElement(right); cut.setRightActionsElement(right);
query = cut.element.querySelectorAll( query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .right-actions-container' '.dv-tabs-and-actions-container > .dv-right-actions-container'
); );
expect(query.length).toBe(1); expect(query.length).toBe(1);
expect(query[0].children.item(0)?.className).toBe( expect(query[0].children.item(0)?.className).toBe(
@ -433,7 +433,7 @@ describe('tabsContainer', () => {
cut.setRightActionsElement(right2); cut.setRightActionsElement(right2);
query = cut.element.querySelectorAll( query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .right-actions-container' '.dv-tabs-and-actions-container > .dv-right-actions-container'
); );
expect(query.length).toBe(1); expect(query.length).toBe(1);
expect(query[0].children.item(0)?.className).toBe( expect(query[0].children.item(0)?.className).toBe(
@ -445,7 +445,7 @@ describe('tabsContainer', () => {
cut.setRightActionsElement(undefined); cut.setRightActionsElement(undefined);
query = cut.element.querySelectorAll( query = cut.element.querySelectorAll(
'.tabs-and-actions-container > .right-actions-container' '.dv-tabs-and-actions-container > .dv-right-actions-container'
); );
expect(query.length).toBe(1); expect(query.length).toBe(1);
@ -472,7 +472,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel); const cut = new TabsContainer(accessor, groupPanel);
const container = cut.element.querySelector('.void-container')!; const container = cut.element.querySelector('.dv-void-container')!;
expect(container).toBeTruthy(); expect(container).toBeTruthy();
jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation( jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation(
@ -528,7 +528,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel); const cut = new TabsContainer(accessor, groupPanel);
const container = cut.element.querySelector('.void-container')!; const container = cut.element.querySelector('.dv-void-container')!;
expect(container).toBeTruthy(); expect(container).toBeTruthy();
jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation( jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation(
@ -596,7 +596,7 @@ describe('tabsContainer', () => {
const panel = createPanel('test_id'); const panel = createPanel('test_id');
cut.openPanel(panel); cut.openPanel(panel);
const el = cut.element.querySelector('.tab')!; const el = cut.element.querySelector('.dv-tab')!;
expect(el).toBeTruthy(); expect(el).toBeTruthy();
const event = new KeyboardEvent('pointerdown', { shiftKey: true }); const event = new KeyboardEvent('pointerdown', { shiftKey: true });
@ -655,14 +655,14 @@ describe('tabsContainer', () => {
const panel = new panelMock('test_id'); const panel = new panelMock('test_id');
cut.openPanel(panel); cut.openPanel(panel);
let result = cut.element.querySelector('.pre-actions-container'); let result = cut.element.querySelector('.dv-pre-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0); expect(result!.childNodes.length).toBe(0);
const actions = document.createElement('div'); const actions = document.createElement('div');
cut.setPrefixActionsElement(actions); cut.setPrefixActionsElement(actions);
result = cut.element.querySelector('.pre-actions-container'); result = cut.element.querySelector('.dv-pre-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(actions); expect(result!.childNodes.item(0)).toBe(actions);
@ -670,14 +670,14 @@ describe('tabsContainer', () => {
const updatedActions = document.createElement('div'); const updatedActions = document.createElement('div');
cut.setPrefixActionsElement(updatedActions); cut.setPrefixActionsElement(updatedActions);
result = cut.element.querySelector('.pre-actions-container'); result = cut.element.querySelector('.dv-pre-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(updatedActions); expect(result!.childNodes.item(0)).toBe(updatedActions);
cut.setPrefixActionsElement(undefined); cut.setPrefixActionsElement(undefined);
result = cut.element.querySelector('.pre-actions-container'); result = cut.element.querySelector('.dv-pre-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0); expect(result!.childNodes.length).toBe(0);
}); });
@ -722,14 +722,14 @@ describe('tabsContainer', () => {
const panel = new panelMock('test_id'); const panel = new panelMock('test_id');
cut.openPanel(panel); cut.openPanel(panel);
let result = cut.element.querySelector('.left-actions-container'); let result = cut.element.querySelector('.dv-left-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0); expect(result!.childNodes.length).toBe(0);
const actions = document.createElement('div'); const actions = document.createElement('div');
cut.setLeftActionsElement(actions); cut.setLeftActionsElement(actions);
result = cut.element.querySelector('.left-actions-container'); result = cut.element.querySelector('.dv-left-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(actions); expect(result!.childNodes.item(0)).toBe(actions);
@ -737,14 +737,14 @@ describe('tabsContainer', () => {
const updatedActions = document.createElement('div'); const updatedActions = document.createElement('div');
cut.setLeftActionsElement(updatedActions); cut.setLeftActionsElement(updatedActions);
result = cut.element.querySelector('.left-actions-container'); result = cut.element.querySelector('.dv-left-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(updatedActions); expect(result!.childNodes.item(0)).toBe(updatedActions);
cut.setLeftActionsElement(undefined); cut.setLeftActionsElement(undefined);
result = cut.element.querySelector('.left-actions-container'); result = cut.element.querySelector('.dv-left-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0); expect(result!.childNodes.length).toBe(0);
}); });
@ -789,14 +789,14 @@ describe('tabsContainer', () => {
const panel = new panelMock('test_id'); const panel = new panelMock('test_id');
cut.openPanel(panel); cut.openPanel(panel);
let result = cut.element.querySelector('.right-actions-container'); let result = cut.element.querySelector('.dv-right-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0); expect(result!.childNodes.length).toBe(0);
const actions = document.createElement('div'); const actions = document.createElement('div');
cut.setRightActionsElement(actions); cut.setRightActionsElement(actions);
result = cut.element.querySelector('.right-actions-container'); result = cut.element.querySelector('.dv-right-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(actions); expect(result!.childNodes.item(0)).toBe(actions);
@ -804,14 +804,14 @@ describe('tabsContainer', () => {
const updatedActions = document.createElement('div'); const updatedActions = document.createElement('div');
cut.setRightActionsElement(updatedActions); cut.setRightActionsElement(updatedActions);
result = cut.element.querySelector('.right-actions-container'); result = cut.element.querySelector('.dv-right-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(updatedActions); expect(result!.childNodes.item(0)).toBe(updatedActions);
cut.setRightActionsElement(undefined); cut.setRightActionsElement(undefined);
result = cut.element.querySelector('.right-actions-container'); result = cut.element.querySelector('.dv-right-actions-container');
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0); expect(result!.childNodes.length).toBe(0);
}); });

2
packages/dockview-core/src/__tests__/dockview/components/watermark/watermark.spec.ts
View File

@ -12,7 +12,7 @@ describe('watermark', () => {
cut.init({ containerApi: api, group }); cut.init({ containerApi: api, group });
const closeEl = cut.element.querySelector('.close-action')!; const closeEl = cut.element.querySelector('.dv-close-action')!;
expect(closeEl).toBeTruthy(); expect(closeEl).toBeTruthy();

50
packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -643,13 +643,13 @@ describe('dockviewComponent', () => {
}); });
let viewQuery = container.querySelectorAll( let viewQuery = container.querySelectorAll(
'.branch-node > .split-view-container > .view-container > .view' '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
viewQuery = container.querySelectorAll( viewQuery = container.querySelectorAll(
'.branch-node > .split-view-container > .view-container > .view:nth-child(1) >.groupview > .content-container > .testpanel-panel2' '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view:nth-child(1) >.dv-groupview > .dv-content-container > .testpanel-panel2'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
@ -661,19 +661,19 @@ describe('dockviewComponent', () => {
}); });
viewQuery = container.querySelectorAll( viewQuery = container.querySelectorAll(
'.branch-node > .split-view-container > .view-container > .view' '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view'
); );
expect(viewQuery.length).toBe(2); expect(viewQuery.length).toBe(2);
viewQuery = container.querySelectorAll( viewQuery = container.querySelectorAll(
'.branch-node > .split-view-container > .view-container > .view:nth-child(1) >.groupview > .content-container > .testpanel-panel2' '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view:nth-child(1) >.dv-groupview > .dv-content-container > .testpanel-panel2'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
viewQuery = container.querySelectorAll( viewQuery = container.querySelectorAll(
'.branch-node > .split-view-container > .view-container > .view:nth-child(2) >.groupview > .content-container > .testpanel-panel1' '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view:nth-child(2) >.dv-groupview > .dv-content-container > .testpanel-panel1'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
@ -2360,17 +2360,17 @@ describe('dockviewComponent', () => {
const group = dockview.getGroupPanel('panel2')!.api.group; const group = dockview.getGroupPanel('panel2')!.api.group;
const viewQuery = group.element.querySelectorAll( const viewQuery = group.element.querySelectorAll(
'.groupview > .tabs-and-actions-container > .tabs-container > .tab' '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab'
); );
expect(viewQuery.length).toBe(2); expect(viewQuery.length).toBe(2);
const viewQuery2 = group.element.querySelectorAll( const viewQuery2 = group.element.querySelectorAll(
'.groupview > .tabs-and-actions-container > .tabs-container > .tab > .dv-default-tab' '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab > .dv-default-tab'
); );
expect(viewQuery2.length).toBe(1); expect(viewQuery2.length).toBe(1);
const viewQuery3 = group.element.querySelectorAll( const viewQuery3 = group.element.querySelectorAll(
'.groupview > .tabs-and-actions-container > .tabs-container > .tab > .panel-tab-part-panel2' '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab > .panel-tab-part-panel2'
); );
expect(viewQuery3.length).toBe(1); expect(viewQuery3.length).toBe(1);
}); });
@ -3038,21 +3038,21 @@ describe('dockviewComponent', () => {
component: 'default', component: 'default',
}); });
expect(dockview.element.querySelectorAll('.view').length).toBe(1); expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1);
const panel2 = dockview.addPanel({ const panel2 = dockview.addPanel({
id: 'panel2', id: 'panel2',
component: 'default', component: 'default',
}); });
expect(dockview.element.querySelectorAll('.view').length).toBe(1); expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1);
const panel3 = dockview.addPanel({ const panel3 = dockview.addPanel({
id: 'panel3', id: 'panel3',
component: 'default', component: 'default',
}); });
expect(dockview.element.querySelectorAll('.view').length).toBe(1); expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1);
dockview.moveGroupOrPanel({ dockview.moveGroupOrPanel({
from: { groupId: panel3.group.id, panelId: panel3.id }, from: { groupId: panel3.group.id, panelId: panel3.id },
@ -3060,7 +3060,7 @@ describe('dockviewComponent', () => {
}); });
expect(dockview.groups.length).toBe(2); expect(dockview.groups.length).toBe(2);
expect(dockview.element.querySelectorAll('.view').length).toBe(2); expect(dockview.element.querySelectorAll('.dv-view').length).toBe(2);
dockview.moveGroupOrPanel({ dockview.moveGroupOrPanel({
from: { groupId: panel2.group.id, panelId: panel2.id }, from: { groupId: panel2.group.id, panelId: panel2.id },
@ -3068,7 +3068,7 @@ describe('dockviewComponent', () => {
}); });
expect(dockview.groups.length).toBe(3); expect(dockview.groups.length).toBe(3);
expect(dockview.element.querySelectorAll('.view').length).toBe(4); expect(dockview.element.querySelectorAll('.dv-view').length).toBe(4);
dockview.moveGroupOrPanel({ dockview.moveGroupOrPanel({
from: { groupId: panel1.group.id, panelId: panel1.id }, from: { groupId: panel1.group.id, panelId: panel1.id },
@ -3077,7 +3077,7 @@ describe('dockviewComponent', () => {
expect(dockview.groups.length).toBe(2); expect(dockview.groups.length).toBe(2);
expect(dockview.element.querySelectorAll('.view').length).toBe(2); expect(dockview.element.querySelectorAll('.dv-view').length).toBe(2);
}); });
test('that fromJSON layouts are resized to the current dimensions', async () => { test('that fromJSON layouts are resized to the current dimensions', async () => {
@ -3199,13 +3199,15 @@ describe('dockviewComponent', () => {
}); });
expect( expect(
dockview.element.querySelectorAll('.view-container > .view').length dockview.element.querySelectorAll('.dv-view-container > .dv-view')
.length
).toBe(1); ).toBe(1);
dockview.addFloatingGroup(panel1); dockview.addFloatingGroup(panel1);
expect( expect(
dockview.element.querySelectorAll('.view-container > .view').length dockview.element.querySelectorAll('.dv-view-container > .dv-view')
.length
).toBe(0); ).toBe(0);
}); });
@ -3432,7 +3434,7 @@ describe('dockviewComponent', () => {
groupDragEvents.push(event); groupDragEvents.push(event);
}); });
const el = dockview.element.querySelector('.tab')!; const el = dockview.element.querySelector('.dv-tab')!;
expect(el).toBeTruthy(); expect(el).toBeTruthy();
fireEvent.dragStart(el); fireEvent.dragStart(el);
@ -3475,7 +3477,7 @@ describe('dockviewComponent', () => {
groupDragEvents.push(event); groupDragEvents.push(event);
}); });
const el = dockview.element.querySelector('.void-container')!; const el = dockview.element.querySelector('.dv-void-container')!;
expect(el).toBeTruthy(); expect(el).toBeTruthy();
fireEvent.dragStart(el); fireEvent.dragStart(el);
@ -3504,7 +3506,7 @@ describe('dockviewComponent', () => {
dockview.layout(1000, 500); dockview.layout(1000, 500);
let el = dockview.element.querySelector('.view-container'); let el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0); expect(el!.childNodes.length).toBe(0);
@ -3516,7 +3518,7 @@ describe('dockviewComponent', () => {
expect(dockview.groups.length).toBe(1); expect(dockview.groups.length).toBe(1);
expect(dockview.panels.length).toBe(1); expect(dockview.panels.length).toBe(1);
el = dockview.element.querySelector('.view-container'); el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
expect(el!.childNodes.length).toBeGreaterThan(0); expect(el!.childNodes.length).toBeGreaterThan(0);
@ -3570,7 +3572,7 @@ describe('dockviewComponent', () => {
expect(dockview.groups.length).toBe(0); expect(dockview.groups.length).toBe(0);
expect(dockview.panels.length).toBe(0); expect(dockview.panels.length).toBe(0);
el = dockview.element.querySelector('.view-container'); el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0); expect(el!.childNodes.length).toBe(0);
}); });
@ -3595,7 +3597,7 @@ describe('dockviewComponent', () => {
dockview.layout(1000, 500); dockview.layout(1000, 500);
let el = dockview.element.querySelector('.view-container'); let el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0); expect(el!.childNodes.length).toBe(0);
@ -3616,7 +3618,7 @@ describe('dockviewComponent', () => {
el = dockview.element.querySelector('.dv-resize-container'); el = dockview.element.querySelector('.dv-resize-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
el = dockview.element.querySelector('.view-container'); el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
expect(el!.childNodes.length).toBeGreaterThan(0); expect(el!.childNodes.length).toBeGreaterThan(0);
@ -3696,7 +3698,7 @@ describe('dockviewComponent', () => {
el = dockview.element.querySelector('.dv-resize-container'); el = dockview.element.querySelector('.dv-resize-container');
expect(el).toBeFalsy(); expect(el).toBeFalsy();
el = dockview.element.querySelector('.view-container'); el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0); expect(el!.childNodes.length).toBe(0);
}); });

34
packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
View File

@ -492,12 +492,12 @@ describe('dockviewGroupPanelModel', () => {
test('default', () => { test('default', () => {
let viewQuery = groupview.element.querySelectorAll( let viewQuery = groupview.element.querySelectorAll(
'.groupview > .tabs-and-actions-container' '.dv-groupview > .dv-tabs-and-actions-container'
); );
expect(viewQuery).toBeTruthy(); expect(viewQuery).toBeTruthy();
viewQuery = groupview.element.querySelectorAll( viewQuery = groupview.element.querySelectorAll(
'.groupview > .content-container' '.dv-groupview > .dv-content-container'
); );
expect(viewQuery).toBeTruthy(); expect(viewQuery).toBeTruthy();
}); });
@ -632,7 +632,7 @@ describe('dockviewGroupPanelModel', () => {
null as any null as any
); );
const contentContainer = groupviewContainer const contentContainer = groupviewContainer
.getElementsByClassName('content-container') .getElementsByClassName('dv-content-container')
.item(0)!.childNodes; .item(0)!.childNodes;
const panel1 = new TestPanel('id_1', panelApi); const panel1 = new TestPanel('id_1', panelApi);
@ -702,7 +702,7 @@ describe('dockviewGroupPanelModel', () => {
}); });
const element = container const element = container
.getElementsByClassName('content-container') .getElementsByClassName('dv-content-container')
.item(0)!; .item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation( jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -716,7 +716,7 @@ describe('dockviewGroupPanelModel', () => {
expect(counter).toBe(1); expect(counter).toBe(1);
expect( expect(
element.getElementsByClassName('drop-target-dropzone').length element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -762,7 +762,7 @@ describe('dockviewGroupPanelModel', () => {
}); });
const element = container const element = container
.getElementsByClassName('content-container') .getElementsByClassName('dv-content-container')
.item(0)!; .item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation( jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -782,7 +782,7 @@ describe('dockviewGroupPanelModel', () => {
cut.locked = false; cut.locked = false;
run(10); run(10);
expect( expect(
element.getElementsByClassName('drop-target-dropzone').length element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1); ).toBe(1);
fireEvent.dragEnd(element); fireEvent.dragEnd(element);
@ -790,7 +790,7 @@ describe('dockviewGroupPanelModel', () => {
cut.locked = 'no-drop-target'; cut.locked = 'no-drop-target';
run(10); run(10);
expect( expect(
element.getElementsByClassName('drop-target-dropzone').length element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
fireEvent.dragEnd(element); fireEvent.dragEnd(element);
@ -798,7 +798,7 @@ describe('dockviewGroupPanelModel', () => {
cut.locked = true; cut.locked = true;
run(10); run(10);
expect( expect(
element.getElementsByClassName('drop-target-dropzone').length element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1); ).toBe(1);
fireEvent.dragEnd(element); fireEvent.dragEnd(element);
@ -806,7 +806,7 @@ describe('dockviewGroupPanelModel', () => {
cut.locked = true; cut.locked = true;
run(25); run(25);
expect( expect(
element.getElementsByClassName('drop-target-dropzone').length element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
fireEvent.dragEnd(element); fireEvent.dragEnd(element);
}); });
@ -860,7 +860,7 @@ describe('dockviewGroupPanelModel', () => {
cut.openPanel(new TestPanel('panel1', panelApi)); cut.openPanel(new TestPanel('panel1', panelApi));
const element = container const element = container
.getElementsByClassName('content-container') .getElementsByClassName('dv-content-container')
.item(0)!; .item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation( jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -879,7 +879,7 @@ describe('dockviewGroupPanelModel', () => {
expect(counter).toBe(0); expect(counter).toBe(0);
expect( expect(
element.getElementsByClassName('drop-target-dropzone').length element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -933,7 +933,7 @@ describe('dockviewGroupPanelModel', () => {
cut.openPanel(new TestPanel('panel2', panelApi)); cut.openPanel(new TestPanel('panel2', panelApi));
const element = container const element = container
.getElementsByClassName('content-container') .getElementsByClassName('dv-content-container')
.item(0)!; .item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation( jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -952,7 +952,7 @@ describe('dockviewGroupPanelModel', () => {
expect(counter).toBe(0); expect(counter).toBe(0);
expect( expect(
element.getElementsByClassName('drop-target-dropzone').length element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -1006,7 +1006,7 @@ describe('dockviewGroupPanelModel', () => {
cut.openPanel(new TestPanel('panel2', panelApi)); cut.openPanel(new TestPanel('panel2', panelApi));
const element = container const element = container
.getElementsByClassName('content-container') .getElementsByClassName('dv-content-container')
.item(0)!; .item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation( jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -1025,7 +1025,7 @@ describe('dockviewGroupPanelModel', () => {
expect(counter).toBe(1); expect(counter).toBe(1);
expect( expect(
element.getElementsByClassName('drop-target-dropzone').length element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0); ).toBe(0);
}); });
@ -1110,7 +1110,7 @@ describe('dockviewGroupPanelModel', () => {
container.getElementsByClassName('watermark-test-container').length container.getElementsByClassName('watermark-test-container').length
).toBe(0); ).toBe(0);
expect( expect(
container.getElementsByClassName('tabs-and-actions-container') container.getElementsByClassName('dv-tabs-and-actions-container')
.length .length
).toBe(1); ).toBe(1);

4
packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
View File

@ -2594,7 +2594,7 @@ describe('gridview', () => {
components: { default: TestGridview }, components: { default: TestGridview },
}); });
let el = gridview.element.querySelector('.view-container'); let el = gridview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0); expect(el!.childNodes.length).toBe(0);
@ -2661,7 +2661,7 @@ describe('gridview', () => {
expect(gridview.groups.length).toBe(0); expect(gridview.groups.length).toBe(0);
el = gridview.element.querySelector('.view-container'); el = gridview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy(); expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0); expect(el!.childNodes.length).toBe(0);
}); });

34
packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
View File

@ -96,7 +96,7 @@ describe('splitview', () => {
expect(splitview.orientation).toBe(Orientation.HORIZONTAL); expect(splitview.orientation).toBe(Orientation.HORIZONTAL);
const viewQuery = container.querySelectorAll( const viewQuery = container.querySelectorAll(
'.split-view-container horizontal' '.dv-split-view-container dv-horizontal'
); );
expect(viewQuery).toBeTruthy(); expect(viewQuery).toBeTruthy();
@ -111,7 +111,7 @@ describe('splitview', () => {
expect(splitview.orientation).toBe(Orientation.VERTICAL); expect(splitview.orientation).toBe(Orientation.VERTICAL);
const viewQuery = container.querySelectorAll( const viewQuery = container.querySelectorAll(
'.split-view-container vertical' '.dv-split-view-container dv-vertical'
); );
expect(viewQuery).toBeTruthy(); expect(viewQuery).toBeTruthy();
@ -128,48 +128,48 @@ describe('splitview', () => {
splitview.addView(new Testview(50, 50)); splitview.addView(new Testview(50, 50));
let viewQuery = container.querySelectorAll( let viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view' '.dv-split-view-container > .dv-view-container > .dv-view'
); );
expect(viewQuery.length).toBe(3); expect(viewQuery.length).toBe(3);
let sashQuery = container.querySelectorAll( let sashQuery = container.querySelectorAll(
'.split-view-container > .sash-container > .sash' '.dv-split-view-container > .dv-sash-container > .dv-sash'
); );
expect(sashQuery.length).toBe(2); expect(sashQuery.length).toBe(2);
splitview.removeView(2); splitview.removeView(2);
viewQuery = container.querySelectorAll( viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view' '.dv-split-view-container > .dv-view-container > .dv-view'
); );
expect(viewQuery.length).toBe(2); expect(viewQuery.length).toBe(2);
sashQuery = container.querySelectorAll( sashQuery = container.querySelectorAll(
'.split-view-container > .sash-container > .sash' '.dv-split-view-container > .dv-sash-container > .dv-sash'
); );
expect(sashQuery.length).toBe(1); expect(sashQuery.length).toBe(1);
splitview.removeView(0); splitview.removeView(0);
viewQuery = container.querySelectorAll( viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view' '.dv-split-view-container > .dv-view-container > .dv-view'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
sashQuery = container.querySelectorAll( sashQuery = container.querySelectorAll(
'.split-view-container > .sash-container > .sash' '.dv-split-view-container > .dv-sash-container > .dv-sash'
); );
expect(sashQuery.length).toBe(0); expect(sashQuery.length).toBe(0);
splitview.removeView(0); splitview.removeView(0);
viewQuery = container.querySelectorAll( viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view' '.dv-split-view-container > .dv-view-container > .dv-view'
); );
expect(viewQuery.length).toBe(0); expect(viewQuery.length).toBe(0);
sashQuery = container.querySelectorAll( sashQuery = container.querySelectorAll(
'.split-view-container > .sash-container > .sash' '.dv-split-view-container > .dv-sash-container > .dv-sash'
); );
expect(sashQuery.length).toBe(0); expect(sashQuery.length).toBe(0);
@ -188,14 +188,14 @@ describe('splitview', () => {
splitview.addView(view2); splitview.addView(view2);
let viewQuery = container.querySelectorAll( let viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view.visible' '.dv-split-view-container > .dv-view-container > .dv-view.visible'
); );
expect(viewQuery.length).toBe(2); expect(viewQuery.length).toBe(2);
splitview.setViewVisible(1, false); splitview.setViewVisible(1, false);
viewQuery = container.querySelectorAll( viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view.visible' '.dv-split-view-container > .dv-view-container > .dv-view.visible'
); );
expect(viewQuery.length).toBe(1); expect(viewQuery.length).toBe(1);
@ -619,7 +619,7 @@ describe('splitview', () => {
); );
const sashElement = container const sashElement = container
.getElementsByClassName('sash') .getElementsByClassName('dv-sash')
.item(0) as HTMLElement; .item(0) as HTMLElement;
// validate the expected state before drag // validate the expected state before drag
@ -803,7 +803,7 @@ describe('splitview', () => {
let viewQuery = Array.from( let viewQuery = Array.from(
container container
.querySelectorAll( .querySelectorAll(
'.split-view-container > .view-container > .view' '.dv-split-view-container > .dv-view-container > .dv-view'
) )
.entries() .entries()
) )
@ -818,7 +818,7 @@ describe('splitview', () => {
let sashQuery = Array.from( let sashQuery = Array.from(
container container
.querySelectorAll( .querySelectorAll(
'.split-view-container > .sash-container > .sash' '.dv-split-view-container > .dv-sash-container > .dv-sash'
) )
.entries() .entries()
) )
@ -860,7 +860,7 @@ describe('splitview', () => {
viewQuery = Array.from( viewQuery = Array.from(
container container
.querySelectorAll( .querySelectorAll(
'.split-view-container > .view-container > .view' '.dv-split-view-container > .dv-view-container > .dv-view'
) )
.entries() .entries()
) )
@ -875,7 +875,7 @@ describe('splitview', () => {
sashQuery = Array.from( sashQuery = Array.from(
container container
.querySelectorAll( .querySelectorAll(
'.split-view-container > .sash-container > .sash' '.dv-split-view-container > .dv-sash-container > .dv-sash'
) )
.entries() .entries()
) )

6
packages/dockview-core/src/dnd/droptarget.scss
View File

@ -1,7 +1,7 @@
.drop-target { .dv-drop-target {
position: relative; position: relative;
> .drop-target-dropzone { > .dv-drop-target-dropzone {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -10,7 +10,7 @@
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
> .drop-target-selection { > .dv-drop-target-selection {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;

8
packages/dockview-core/src/dnd/droptarget.ts
View File

@ -196,13 +196,13 @@ export class Droptarget extends CompositeDisposable {
if (!this.targetElement) { if (!this.targetElement) {
this.targetElement = document.createElement('div'); this.targetElement = document.createElement('div');
this.targetElement.className = 'drop-target-dropzone'; this.targetElement.className = 'dv-drop-target-dropzone';
this.overlayElement = document.createElement('div'); this.overlayElement = document.createElement('div');
this.overlayElement.className = 'drop-target-selection'; this.overlayElement.className = 'dv-drop-target-selection';
this._state = 'center'; this._state = 'center';
this.targetElement.appendChild(this.overlayElement); this.targetElement.appendChild(this.overlayElement);
this.element.classList.add('drop-target'); this.element.classList.add('dv-drop-target');
this.element.append(this.targetElement); this.element.append(this.targetElement);
} }
@ -399,7 +399,7 @@ export class Droptarget extends CompositeDisposable {
this.element.removeChild(this.targetElement); this.element.removeChild(this.targetElement);
this.targetElement = undefined; this.targetElement = undefined;
this.overlayElement = undefined; this.overlayElement = undefined;
this.element.classList.remove('drop-target'); this.element.classList.remove('dv-drop-target');
} }
} }
} }

2
packages/dockview-core/src/dockview/components/panel/content.ts
View File

@ -55,7 +55,7 @@ export class ContentContainer
) { ) {
super(); super();
this._element = document.createElement('div'); this._element = document.createElement('div');
this._element.className = 'content-container'; this._element.className = 'dv-content-container';
this._element.tabIndex = -1; this._element.tabIndex = -1;
this.addDisposables(this._onDidFocus, this._onDidBlur); this.addDisposables(this._onDidFocus, this._onDidBlur);

6
packages/dockview-core/src/dockview/components/tab/defaultTab.scss
View File

@ -6,7 +6,7 @@
); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */ ); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
} }
.tab { .dv-tab {
flex-shrink: 0; flex-shrink: 0;
&:focus-within, &:focus-within,
@ -33,7 +33,7 @@
} }
} }
&.active-tab { &.dv-active-tab {
.dv-default-tab { .dv-default-tab {
.dv-default-tab-action { .dv-default-tab-action {
visibility: visible; visibility: visible;
@ -41,7 +41,7 @@
} }
} }
&.inactive-tab { &.dv-inactive-tab {
.dv-default-tab { .dv-default-tab {
.dv-default-tab-action { .dv-default-tab-action {
visibility: hidden; visibility: hidden;

8
packages/dockview-core/src/dockview/components/tab/tab.ts
View File

@ -72,11 +72,11 @@ export class Tab extends CompositeDisposable {
super(); super();
this._element = document.createElement('div'); this._element = document.createElement('div');
this._element.className = 'tab'; this._element.className = 'dv-tab';
this._element.tabIndex = 0; this._element.tabIndex = 0;
this._element.draggable = true; this._element.draggable = true;
toggleClass(this.element, 'inactive-tab', true); toggleClass(this.element, 'dv-inactive-tab', true);
const dragHandler = new TabDragHandler( const dragHandler = new TabDragHandler(
this._element, this._element,
@ -139,8 +139,8 @@ export class Tab extends CompositeDisposable {
} }
public setActive(isActive: boolean): void { public setActive(isActive: boolean): void {
toggleClass(this.element, 'active-tab', isActive); toggleClass(this.element, 'dv-active-tab', isActive);
toggleClass(this.element, 'inactive-tab', !isActive); toggleClass(this.element, 'dv-inactive-tab', !isActive);
} }
public setContent(part: ITabRenderer): void { public setContent(part: ITabRenderer): void {

18
packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss
View File

@ -1,4 +1,4 @@
.tabs-and-actions-container { .dv-tabs-and-actions-container {
display: flex; display: flex;
background-color: var(--dv-tabs-and-actions-container-background-color); background-color: var(--dv-tabs-and-actions-container-background-color);
flex-shrink: 0; flex-shrink: 0;
@ -6,31 +6,27 @@
height: var(--dv-tabs-and-actions-container-height); height: var(--dv-tabs-and-actions-container-height);
font-size: var(--dv-tabs-and-actions-container-font-size); font-size: var(--dv-tabs-and-actions-container-font-size);
&.hidden {
display: none;
}
&.dv-single-tab.dv-full-width-single-tab { &.dv-single-tab.dv-full-width-single-tab {
.tabs-container { .dv-tabs-container {
flex-grow: 1; flex-grow: 1;
.tab { .dv-tab {
flex-grow: 1; flex-grow: 1;
} }
} }
.void-container { .dv-void-container {
flex-grow: 0; flex-grow: 0;
} }
} }
.void-container { .dv-void-container {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
cursor: grab; cursor: grab;
} }
.tabs-container { .dv-tabs-container {
display: flex; display: flex;
overflow-x: overlay; overflow-x: overlay;
overflow-y: hidden; overflow-y: hidden;
@ -51,7 +47,7 @@
background: var(--dv-tabs-container-scrollbar-color); background: var(--dv-tabs-container-scrollbar-color);
} }
.tab { .dv-tab {
-webkit-user-drag: element; -webkit-user-drag: element;
outline: none; outline: none;
min-width: 75px; min-width: 75px;

10
packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
View File

@ -176,7 +176,7 @@ export class TabsContainer
super(); super();
this._element = document.createElement('div'); this._element = document.createElement('div');
this._element.className = 'tabs-and-actions-container'; this._element.className = 'dv-tabs-and-actions-container';
toggleClass( toggleClass(
this._element, this._element,
@ -185,16 +185,16 @@ export class TabsContainer
); );
this.rightActionsContainer = document.createElement('div'); this.rightActionsContainer = document.createElement('div');
this.rightActionsContainer.className = 'right-actions-container'; this.rightActionsContainer.className = 'dv-right-actions-container';
this.leftActionsContainer = document.createElement('div'); this.leftActionsContainer = document.createElement('div');
this.leftActionsContainer.className = 'left-actions-container'; this.leftActionsContainer.className = 'dv-left-actions-container';
this.preActionsContainer = document.createElement('div'); this.preActionsContainer = document.createElement('div');
this.preActionsContainer.className = 'pre-actions-container'; this.preActionsContainer.className = 'dv-pre-actions-container';
this.tabContainer = document.createElement('div'); this.tabContainer = document.createElement('div');
this.tabContainer.className = 'tabs-container'; this.tabContainer.className = 'dv-tabs-container';
this.voidContainer = new VoidContainer(this.accessor, this.group); this.voidContainer = new VoidContainer(this.accessor, this.group);

2
packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
View File

@ -35,7 +35,7 @@ export class VoidContainer extends CompositeDisposable {
this._element = document.createElement('div'); this._element = document.createElement('div');
this._element.className = 'void-container'; this._element.className = 'dv-void-container';
this._element.tabIndex = 0; this._element.tabIndex = 0;
this._element.draggable = true; this._element.draggable = true;

16
packages/dockview-core/src/dockview/components/watermark/watermark.scss
View File

@ -1,30 +1,30 @@
.watermark { .dv-watermark {
display: flex; display: flex;
width: 100%; width: 100%;
&.has-actions { &.dv-has-actions {
.watermark-title { .dv-watermark-title {
.actions-container { .dv-actions-container {
display: none; display: none;
} }
} }
} }
.watermark-title { .dv-watermark-title {
height: 35px; height: 35px;
width: 100%; width: 100%;
display: flex; display: flex;
} }
.watermark-content { .dv-watermark-content {
flex-grow: 1; flex-grow: 1;
} }
.actions-container { .dv-actions-container {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0px 8px; padding: 0px 8px;
.close-action { .dv-close-action {
padding: 4px; padding: 4px;
display: flex; display: flex;
align-items: center; align-items: center;

12
packages/dockview-core/src/dockview/components/watermark/watermark.ts
View File

@ -24,25 +24,25 @@ export class Watermark
constructor() { constructor() {
super(); super();
this._element = document.createElement('div'); this._element = document.createElement('div');
this._element.className = 'watermark'; this._element.className = 'dv-watermark';
const title = document.createElement('div'); const title = document.createElement('div');
title.className = 'watermark-title'; title.className = 'dv-watermark-title';
const emptySpace = document.createElement('span'); const emptySpace = document.createElement('span');
emptySpace.style.flexGrow = '1'; emptySpace.style.flexGrow = '1';
const content = document.createElement('div'); const content = document.createElement('div');
content.className = 'watermark-content'; content.className = 'dv-watermark-content';
this._element.appendChild(title); this._element.appendChild(title);
this._element.appendChild(content); this._element.appendChild(content);
const actionsContainer = document.createElement('div'); const actionsContainer = document.createElement('div');
actionsContainer.className = 'actions-container'; actionsContainer.className = 'dv-actions-container';
const closeAnchor = document.createElement('div'); const closeAnchor = document.createElement('div');
closeAnchor.className = 'close-action'; closeAnchor.className = 'dv-close-action';
closeAnchor.appendChild(createCloseButton()); closeAnchor.appendChild(createCloseButton());
actionsContainer.appendChild(closeAnchor); actionsContainer.appendChild(closeAnchor);
@ -69,6 +69,6 @@ export class Watermark
private render(): void { private render(): void {
const isOneGroup = !!(this._api && this._api.size <= 1); const isOneGroup = !!(this._api && this._api.size <= 1);
toggleClass(this.element, 'has-actions', isOneGroup); toggleClass(this.element, 'dv-has-actions', isOneGroup);
} }
} }

20
packages/dockview-core/src/dockview/dockviewComponent.scss
View File

@ -16,16 +16,16 @@
} }
} }
.groupview { .dv-groupview {
&.active-group { &.dv-active-group {
> .tabs-and-actions-container > .tabs-container > .tab { > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab {
&.active-tab { &.dv-active-tab {
background-color: var( background-color: var(
--dv-activegroup-visiblepanel-tab-background-color --dv-activegroup-visiblepanel-tab-background-color
); );
color: var(--dv-activegroup-visiblepanel-tab-color); color: var(--dv-activegroup-visiblepanel-tab-color);
} }
&.inactive-tab { &.dv-inactive-tab {
background-color: var( background-color: var(
--dv-activegroup-hiddenpanel-tab-background-color --dv-activegroup-hiddenpanel-tab-background-color
); );
@ -33,15 +33,15 @@
} }
} }
} }
&.inactive-group { &.dv-inactive-group {
> .tabs-and-actions-container > .tabs-container > .tab { > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab {
&.active-tab { &.dv-active-tab {
background-color: var( background-color: var(
--dv-inactivegroup-visiblepanel-tab-background-color --dv-inactivegroup-visiblepanel-tab-background-color
); );
color: var(--dv-inactivegroup-visiblepanel-tab-color); color: var(--dv-inactivegroup-visiblepanel-tab-color);
} }
&.inactive-tab { &.dv-inactive-tab {
background-color: var( background-color: var(
--dv-inactivegroup-hiddenpanel-tab-background-color --dv-inactivegroup-hiddenpanel-tab-background-color
); );
@ -55,7 +55,7 @@
* when a tab is dragged we lose the above stylings because they are conditional on parent elements * when a tab is dragged we lose the above stylings because they are conditional on parent elements
* therefore we also set some stylings for the dragging event * therefore we also set some stylings for the dragging event
**/ **/
.tab { .dv-tab {
&.dv-tab-dragging { &.dv-tab-dragging {
background-color: var( background-color: var(
--dv-activegroup-visiblepanel-tab-background-color --dv-activegroup-visiblepanel-tab-background-color

2
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -890,7 +890,7 @@ export class DockviewComponent
DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
}); });
const el = group.element.querySelector('.void-container'); const el = group.element.querySelector('.dv-void-container');
if (!el) { if (!el) {
throw new Error('failed to find drag handle'); throw new Error('failed to find drag handle');

8
packages/dockview-core/src/dockview/dockviewGroupPanel.scss
View File

@ -1,4 +1,4 @@
.groupview { .dv-groupview {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@ -9,13 +9,13 @@
outline: none; outline: none;
} }
&.empty { &.dv-empty {
> .tabs-and-actions-container { > .dv-tabs-and-actions-container {
display: none; display: none;
} }
} }
> .content-container { > .dv-content-container {
flex-grow: 1; flex-grow: 1;
min-height: 0; min-height: 0;
outline: none; outline: none;

10
packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
View File

@ -342,7 +342,7 @@ export class DockviewGroupPanelModel
toggleClass( toggleClass(
this.container, this.container,
'locked-groupview', 'dv-locked-groupview',
value === 'no-drop-target' || value value === 'no-drop-target' || value
); );
} }
@ -436,7 +436,7 @@ export class DockviewGroupPanelModel
) { ) {
super(); super();
toggleClass(this.container, 'groupview', true); toggleClass(this.container, 'dv-groupview', true);
this._api = new DockviewApi(this.accessor); this._api = new DockviewApi(this.accessor);
@ -806,8 +806,8 @@ export class DockviewGroupPanelModel
this._isGroupActive = isGroupActive; this._isGroupActive = isGroupActive;
toggleClass(this.container, 'active-group', isGroupActive); toggleClass(this.container, 'dv-active-group', isGroupActive);
toggleClass(this.container, 'inactive-group', !isGroupActive); toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
this.tabsContainer.setActive(this.isActive); this.tabsContainer.setActive(this.isActive);
@ -956,7 +956,7 @@ export class DockviewGroupPanelModel
} }
private updateContainer(): void { private updateContainer(): void {
toggleClass(this.container, 'empty', this.isEmpty); toggleClass(this.container, 'dv-empty', this.isEmpty);
this.panels.forEach((panel) => panel.runEvents()); this.panels.forEach((panel) => panel.runEvents());

2
packages/dockview-core/src/gridview/branchNode.ts
View File

@ -171,7 +171,7 @@ export class BranchNode extends CompositeDisposable implements IView {
this._size = size; this._size = size;
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.className = 'branch-node'; this.element.className = 'dv-branch-node';
if (!childDescriptors) { if (!childDescriptors) {
this.splitview = new Splitview(this.element, { this.splitview = new Splitview(this.element, {

4
packages/dockview-core/src/gridview/gridview.scss
View File

@ -1,5 +1,5 @@
.grid-view, .dv-grid-view,
.branch-node { .dv-branch-node {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }

4
packages/dockview-core/src/gridview/gridview.ts
View File

@ -113,7 +113,7 @@ export function getGridLocation(element: HTMLElement): number[] {
throw new Error('Invalid grid element'); throw new Error('Invalid grid element');
} }
if (/\bgrid-view\b/.test(parentElement.className)) { if (/\bdv-grid-view\b/.test(parentElement.className)) {
return []; return [];
} }
@ -711,7 +711,7 @@ export class Gridview implements IDisposable {
margin?: number margin?: number
) { ) {
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.className = 'grid-view'; this.element.className = 'dv-grid-view';
this._locked = locked ?? false; this._locked = locked ?? false;
this._margin = margin ?? 0; this._margin = margin ?? 0;

4
packages/dockview-core/src/paneview/defaultPaneviewHeader.ts
View File

@ -26,11 +26,11 @@ export class DefaultHeader
super(); super();
this._element = document.createElement('div'); this._element = document.createElement('div');
this.element.className = 'default-header'; this.element.className = 'dv-default-header';
this._content = document.createElement('span'); this._content = document.createElement('span');
this._expander = document.createElement('div'); this._expander = document.createElement('div');
this._expander.className = 'dockview-pane-header-icon'; this._expander.className = 'dv-pane-header-icon';
this.element.appendChild(this._expander); this.element.appendChild(this._expander);
this.element.appendChild(this._content); this.element.appendChild(this._content);

24
packages/dockview-core/src/paneview/paneview.scss
View File

@ -1,14 +1,14 @@
.pane-container { .dv-pane-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
&.animated { &.dv-animated {
.view { .dv-view {
transition-duration: 0.15s; transition-duration: 0.15s;
transition-timing-function: ease-out; transition-timing-function: ease-out;
} }
} }
.view { .dv-view {
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -19,19 +19,19 @@
} }
&:not(:first-child) { &:not(:first-child) {
.pane > .pane-header { .dv-pane > .dv-pane-header {
border-top: 1px solid var(--dv-paneview-header-border-color); border-top: 1px solid var(--dv-paneview-header-border-color);
} }
} }
.default-header { .dv-default-header {
background-color: var(--dv-group-view-background-color); background-color: var(--dv-group-view-background-color);
color: var(--dv-activegroup-visiblepanel-tab-color); color: var(--dv-activegroup-visiblepanel-tab-color);
display: flex; display: flex;
padding: 0px 8px; padding: 0px 8px;
cursor: pointer; cursor: pointer;
.dockview-pane-header-icon { .dv-pane-header-icon {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -44,23 +44,23 @@
} }
} }
&:first-of-type > .pane > .pane-header { &:first-of-type > .dv-pane > .dv-pane-header {
border-top: none !important; border-top: none !important;
} }
.pane { .dv-pane {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
.pane-header { .dv-pane-header {
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
position: relative; position: relative;
outline: none; outline: none;
&.pane-draggable { &.dv-pane-draggable {
cursor: pointer; cursor: pointer;
} }
@ -83,7 +83,7 @@
} }
} }
} }
.pane-body { .dv-pane-body {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
flex-grow: 1; flex-grow: 1;

6
packages/dockview-core/src/paneview/paneview.ts
View File

@ -61,7 +61,7 @@ export class Paneview extends CompositeDisposable implements IDisposable {
this._orientation = options.orientation ?? Orientation.VERTICAL; this._orientation = options.orientation ?? Orientation.VERTICAL;
this.element = document.createElement('div'); this.element = document.createElement('div');
this.element.className = 'pane-container'; this.element.className = 'dv-pane-container';
container.appendChild(this.element); container.appendChild(this.element);
@ -190,11 +190,11 @@ export class Paneview extends CompositeDisposable implements IDisposable {
this.animationTimer = undefined; this.animationTimer = undefined;
} }
addClasses(this.element, 'animated'); addClasses(this.element, 'dv-animated');
this.animationTimer = setTimeout(() => { this.animationTimer = setTimeout(() => {
this.animationTimer = undefined; this.animationTimer = undefined;
removeClasses(this.element, 'animated'); removeClasses(this.element, 'dv-animated');
}, 200); }, 200);
} }

6
packages/dockview-core/src/paneview/paneviewPanel.ts
View File

@ -175,7 +175,7 @@ export abstract class PaneviewPanel
this._orientation = orientation; this._orientation = orientation;
this.element.classList.add('pane'); this.element.classList.add('dv-pane');
this.addDisposables( this.addDisposables(
this.api.onWillVisibilityChange((event) => { this.api.onWillVisibilityChange((event) => {
@ -310,7 +310,7 @@ export abstract class PaneviewPanel
this.header = document.createElement('div'); this.header = document.createElement('div');
this.header.tabIndex = 0; this.header.tabIndex = 0;
this.header.className = 'pane-header'; this.header.className = 'dv-pane-header';
this.header.style.height = `${this.headerSize}px`; this.header.style.height = `${this.headerSize}px`;
this.header.style.lineHeight = `${this.headerSize}px`; this.header.style.lineHeight = `${this.headerSize}px`;
this.header.style.minHeight = `${this.headerSize}px`; this.header.style.minHeight = `${this.headerSize}px`;
@ -320,7 +320,7 @@ export abstract class PaneviewPanel
this.body = document.createElement('div'); this.body = document.createElement('div');
this.body.className = 'pane-body'; this.body.className = 'dv-pane-body';
this.element.appendChild(this.body); this.element.appendChild(this.body);
} }

64
packages/dockview-core/src/splitview/splitview.scss
View File

@ -1,17 +1,17 @@
.dv-debug { .dv-debug {
.split-view-container { .dv-split-view-container {
.sash-container { .dv-sash-container {
.sash { .dv-sash {
&.enabled { &.dv-enabled {
background-color: black; background-color: black;
} }
&.disabled { &.dv-disabled {
background-color: orange; background-color: orange;
} }
&.maximum { &.dv-maximum {
background-color: green; background-color: green;
} }
&.minimum { &.dv-minimum {
background-color: red; background-color: red;
} }
} }
@ -19,47 +19,47 @@
} }
} }
.split-view-container { .dv-split-view-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
width: 100%; width: 100%;
&.dv-splitview-disabled { &.dv-splitview-disabled {
& > .sash-container > .sash { & > .dv-sash-container > .dv-sash {
pointer-events: none; pointer-events: none;
} }
} }
&.animation { &.dv-animation {
.view, .dv-view,
.sash { .dv-sash {
transition-duration: 0.15s; transition-duration: 0.15s;
transition-timing-function: ease-out; transition-timing-function: ease-out;
} }
} }
&.horizontal { &.dv-horizontal {
height: 100%; height: 100%;
& > .sash-container > .sash { & > .dv-sash-container > .dv-sash {
height: 100%; height: 100%;
width: 4px; width: 4px;
&.enabled { &.dv-enabled {
cursor: ew-resize; cursor: ew-resize;
} }
&.disabled { &.dv-disabled {
cursor: default; cursor: default;
} }
&.maximum { &.dv-maximum {
cursor: w-resize; cursor: w-resize;
} }
&.minimum { &.dv-minimum {
cursor: e-resize; cursor: e-resize;
} }
} }
& > .view-container > .view { & > .dv-view-container > .dv-view {
&:not(:first-child) { &:not(:first-child) {
&::before { &::before {
height: 100%; height: 100%;
@ -69,28 +69,28 @@
} }
} }
&.vertical { &.dv-vertical {
width: 100%; width: 100%;
& > .sash-container > .sash { & > .dv-sash-container > .dv-sash {
width: 100%; width: 100%;
height: 4px; height: 4px;
&.enabled { &.dv-enabled {
cursor: ns-resize; cursor: ns-resize;
} }
&.disabled { &.dv-disabled {
cursor: default; cursor: default;
} }
&.maximum { &.dv-maximum {
cursor: n-resize; cursor: n-resize;
} }
&.minimum { &.dv-minimum {
cursor: s-resize; cursor: s-resize;
} }
} }
& > .view-container > .view { & > .dv-view-container > .dv-view {
width: 100%; width: 100%;
&:not(:first-child) { &:not(:first-child) {
@ -102,12 +102,12 @@
} }
} }
.sash-container { .dv-sash-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; position: absolute;
.sash { .dv-sash {
position: absolute; position: absolute;
z-index: 99; z-index: 99;
outline: none; outline: none;
@ -130,13 +130,13 @@
} }
} }
.view-container { .dv-view-container {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: var(--dv-background-color); background-color: var(--dv-background-color);
.view { .dv-view {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
@ -144,8 +144,8 @@
} }
} }
&.separator-border { &.dv-separator-border {
.view:not(:first-child)::before { .dv-view:not(:first-child)::before {
content: ' '; content: ' ';
position: absolute; position: absolute;
top: 0; top: 0;

40
packages/dockview-core/src/splitview/splitview.ts
View File

@ -160,11 +160,11 @@ export class Splitview {
this.size = this.orthogonalSize; this.size = this.orthogonalSize;
this.orthogonalSize = tmp; this.orthogonalSize = tmp;
removeClasses(this.element, 'horizontal', 'vertical'); removeClasses(this.element, 'dv-horizontal', 'dv-vertical');
this.element.classList.add( this.element.classList.add(
this.orientation == Orientation.HORIZONTAL this.orientation == Orientation.HORIZONTAL
? 'horizontal' ? 'dv-horizontal'
: 'vertical' : 'dv-vertical'
); );
} }
@ -277,10 +277,10 @@ export class Splitview {
style(styles?: ISplitviewStyles): void { style(styles?: ISplitviewStyles): void {
if (styles?.separatorBorder === 'transparent') { if (styles?.separatorBorder === 'transparent') {
removeClasses(this.element, 'separator-border'); removeClasses(this.element, 'dv-separator-border');
this.element.style.removeProperty('--dv-separator-border'); this.element.style.removeProperty('--dv-separator-border');
} else { } else {
addClasses(this.element, 'separator-border'); addClasses(this.element, 'dv-separator-border');
if (styles?.separatorBorder) { if (styles?.separatorBorder) {
this.element.style.setProperty( this.element.style.setProperty(
'--dv-separator-border', '--dv-separator-border',
@ -390,7 +390,7 @@ export class Splitview {
skipLayout?: boolean skipLayout?: boolean
): void { ): void {
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'view'; container.className = 'dv-view';
container.appendChild(view.element); container.appendChild(view.element);
@ -431,7 +431,7 @@ export class Splitview {
if (this.viewItems.length > 1) { if (this.viewItems.length > 1) {
//add sash //add sash
const sash = document.createElement('div'); const sash = document.createElement('div');
sash.className = 'sash'; sash.className = 'dv-sash';
const onPointerStart = (event: PointerEvent) => { const onPointerStart = (event: PointerEvent) => {
for (const item of this.viewItems) { for (const item of this.viewItems) {
@ -835,13 +835,17 @@ export class Splitview {
const size = view.visible ? view.size - marginReducedSize : 0; const size = view.visible ? view.size - marginReducedSize : 0;
const visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount[i] - 1); const visiblePanelsBeforeThisView = Math.max(
0,
runningVisiblePanelCount[i] - 1
);
const offset = const offset =
i === 0 || visiblePanelsBeforeThisView === 0 i === 0 || visiblePanelsBeforeThisView === 0
? 0 ? 0
: viewLeftOffsets[i - 1] + : viewLeftOffsets[i - 1] +
(visiblePanelsBeforeThisView / sashCount) * marginReducedSize; (visiblePanelsBeforeThisView / sashCount) *
marginReducedSize;
if (i < this.viewItems.length - 1) { if (i < this.viewItems.length - 1) {
// calculate sash position // calculate sash position
@ -985,10 +989,10 @@ export class Splitview {
} }
private updateSash(sash: ISashItem, state: SashState): void { private updateSash(sash: ISashItem, state: SashState): void {
toggleClass(sash.container, 'disabled', state === SashState.DISABLED); toggleClass(sash.container, 'dv-disabled', state === SashState.DISABLED);
toggleClass(sash.container, 'enabled', state === SashState.ENABLED); toggleClass(sash.container, 'dv-enabled', state === SashState.ENABLED);
toggleClass(sash.container, 'maximum', state === SashState.MAXIMUM); toggleClass(sash.container, 'dv-maximum', state === SashState.MAXIMUM);
toggleClass(sash.container, 'minimum', state === SashState.MINIMUM); toggleClass(sash.container, 'dv-minimum', state === SashState.MINIMUM);
} }
private resize = ( private resize = (
@ -1122,13 +1126,13 @@ export class Splitview {
private createViewContainer(): HTMLElement { private createViewContainer(): HTMLElement {
const element = document.createElement('div'); const element = document.createElement('div');
element.className = 'view-container'; element.className = 'dv-view-container';
return element; return element;
} }
private createSashContainer(): HTMLElement { private createSashContainer(): HTMLElement {
const element = document.createElement('div'); const element = document.createElement('div');
element.className = 'sash-container'; element.className = 'dv-sash-container';
return element; return element;
} }
@ -1136,9 +1140,9 @@ export class Splitview {
const element = document.createElement('div'); const element = document.createElement('div');
const orientationClassname = const orientationClassname =
this._orientation === Orientation.HORIZONTAL this._orientation === Orientation.HORIZONTAL
? 'horizontal' ? 'dv-horizontal'
: 'vertical'; : 'dv-vertical';
element.className = `split-view-container ${orientationClassname}`; element.className = `dv-split-view-container ${orientationClassname}`;
return element; return element;
} }

2
packages/dockview-core/src/svg.scss
View File

@ -1,4 +1,4 @@
.dockview-svg { .dv-svg {
display: inline-block; display: inline-block;
fill: currentcolor; fill: currentcolor;
line-height: 1; line-height: 1;

2
packages/dockview-core/src/svg.ts
View File

@ -10,7 +10,7 @@ const createSvgElementFromPath = (params: {
svg.setAttributeNS(null, 'viewBox', params.viewbox); svg.setAttributeNS(null, 'viewBox', params.viewbox);
svg.setAttributeNS(null, 'aria-hidden', 'false'); svg.setAttributeNS(null, 'aria-hidden', 'false');
svg.setAttributeNS(null, 'focusable', 'false'); svg.setAttributeNS(null, 'focusable', 'false');
svg.classList.add('dockview-svg'); svg.classList.add('dv-svg');
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttributeNS(null, 'd', params.path); path.setAttributeNS(null, 'd', params.path);
svg.appendChild(path); svg.appendChild(path);

71
packages/dockview-core/src/theme.scss
View File

@ -80,22 +80,22 @@
--dv-inactivegroup-visiblepanel-tab-color: white; --dv-inactivegroup-visiblepanel-tab-color: white;
--dv-inactivegroup-hiddenpanel-tab-color: white; --dv-inactivegroup-hiddenpanel-tab-color: white;
.groupview { .dv-groupview {
&.active-group { &.dv-active-group {
> .tabs-and-actions-container { > .dv-tabs-and-actions-container {
box-sizing: content-box; box-sizing: content-box;
border-bottom: 2px solid border-bottom: 2px solid
var(--dv-activegroup-visiblepanel-tab-background-color); var(--dv-activegroup-visiblepanel-tab-background-color);
.tab { .dv-tab {
&.active-tab { &.dv-active-tab {
border-top: 2px solid border-top: 2px solid
var( var(
--dv-activegroup-visiblepanel-tab-background-color --dv-activegroup-visiblepanel-tab-background-color
); );
} }
&.inactive-tab { &.dv-inactive-tab {
border-top: 2px solid border-top: 2px solid
var( var(
--dv-activegroup-hiddenpanel-tab-background-color --dv-activegroup-hiddenpanel-tab-background-color
@ -104,21 +104,21 @@
} }
} }
} }
&.inactive-group { &.dv-inactive-group {
> .tabs-and-actions-container { > .dv-tabs-and-actions-container {
box-sizing: content-box; box-sizing: content-box;
border-bottom: 2px solid border-bottom: 2px solid
var(--dv-inactivegroup-visiblepanel-tab-background-color); var(--dv-inactivegroup-visiblepanel-tab-background-color);
.tab { .dv-tab {
&.active-tab { &.dv-active-tab {
border-top: 2px solid border-top: 2px solid
var( var(
--dv-inactivegroup-visiblepanel-tab-background-color --dv-inactivegroup-visiblepanel-tab-background-color
); );
} }
&.inactive-tab { &.dv-inactive-tab {
border-top: 2px solid border-top: 2px solid
var( var(
--dv-inactivegroup-hiddenpanel-tab-background-color --dv-inactivegroup-hiddenpanel-tab-background-color
@ -177,11 +177,11 @@
--dv-paneview-active-outline-color: #6272a4; --dv-paneview-active-outline-color: #6272a4;
.groupview { .dv-groupview {
&.active-group { &.dv-active-group {
> .tabs-and-actions-container { > .dv-tabs-and-actions-container {
> .tabs-container { > .dv-tabs-container {
> .tab.active-tab { > .dv-tab.dv-active-tab {
position: relative; position: relative;
&::after { &::after {
@ -198,10 +198,10 @@
} }
} }
} }
&.inactive-group { &.dv-inactive-group {
> .tabs-and-actions-container { > .dv-tabs-and-actions-container {
> .tabs-container { > .dv-tabs-container {
> .tab.active-tab { > .dv-tab.dv-active-tab {
position: relative; position: relative;
&::after { &::after {
@ -230,20 +230,20 @@
} }
@mixin dockview-design-replit-mixin { @mixin dockview-design-replit-mixin {
.dv-resize-container:has(> .groupview) { .dv-resize-container:has(> .dv-groupview) {
border-radius: 8px; border-radius: 8px;
} }
.groupview { .dv-groupview {
overflow: hidden; overflow: hidden;
border-radius: 10px; border-radius: 10px;
.tabs-and-actions-container { .dv-tabs-and-actions-container {
.tab { .dv-tab {
margin: 4px; margin: 4px;
border-radius: 8px; border-radius: 8px;
.dockview-svg { .dv-svg {
height: 8px; height: 8px;
width: 8px; width: 8px;
} }
@ -255,15 +255,15 @@
border-bottom: 1px solid rgba(128, 128, 128, 0.35); border-bottom: 1px solid rgba(128, 128, 128, 0.35);
} }
.content-container { .dv-content-container {
background-color: #fcfcfc; background-color: #fcfcfc;
} }
&.active-group { &.dv-active-group {
border: 1px solid rgba(128, 128, 128, 0.35); border: 1px solid rgba(128, 128, 128, 0.35);
} }
&.inactive-group { &.dv-inactive-group {
border: 1px solid transparent; border: 1px solid transparent;
} }
} }
@ -292,7 +292,7 @@
} }
} }
.horizontal > .sash-container > .sash { .dv-horizontal > .dv-sash-container > .dv-sash {
&:not(.disabled) { &:not(.disabled) {
&::after { &::after {
content: ''; content: '';
@ -306,6 +306,19 @@
position: absolute; position: absolute;
} }
&:hover {
&::after {
content: '';
height: 40px;
width: 4px;
border-radius: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--dv-separator-handle-background-color);
position: absolute;
}
&:hover { &:hover {
&::after { &::after {
background-color: var( background-color: var(