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

chore: rename classes to start with dv-

Browse Source
This commit is contained in:
mathuo 2024-08-14 20:02:12 +01:00
parent a6a2d048c7
commit affb8590dc
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
34 changed files with 294 additions and 292 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);
const target = element.querySelector(
'.drop-target-dropzone'
'.dv-drop-target-dropzone'
) as HTMLElement;
fireEvent.drop(target);
expect(position).toBe('center');
@ -61,7 +61,7 @@ describe('droptarget', () => {
const event = new Event('dragover');
(event as any)['__dockview_droptarget_event_is_used__'] = true;
fireEvent(element, event);
expect(element.querySelector('.drop-target-dropzone')).toBeNull();
expect(element.querySelector('.dv-drop-target-dropzone')).toBeNull();
});
test('directionToPosition', () => {
@ -102,7 +102,7 @@ describe('droptarget', () => {
fireEvent.dragOver(element);
const target = element.querySelector(
'.drop-target-dropzone'
'.dv-drop-target-dropzone'
) as HTMLElement;
fireEvent.drop(target);
expect(position).toBe('center');
@ -124,7 +124,7 @@ describe('droptarget', () => {
fireEvent.dragOver(element);
const target = element.querySelector(
'.drop-target-dropzone'
'.dv-drop-target-dropzone'
) as HTMLElement;
jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100);
@ -155,12 +155,12 @@ describe('droptarget', () => {
fireEvent.dragOver(element);
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);
const target = element.querySelector(
'.drop-target-dropzone'
'.dv-drop-target-dropzone'
) as HTMLElement;
jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100);
@ -187,13 +187,13 @@ describe('droptarget', () => {
}
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(droptarget.state).toBe('left');
check(
element
.getElementsByClassName('drop-target-selection')
.getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement,
{
top: '0px',
@ -209,13 +209,13 @@ describe('droptarget', () => {
);
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(droptarget.state).toBe('top');
check(
element
.getElementsByClassName('drop-target-selection')
.getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement,
{
top: '0px',
@ -231,13 +231,13 @@ describe('droptarget', () => {
);
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(droptarget.state).toBe('bottom');
check(
element
.getElementsByClassName('drop-target-selection')
.getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement,
{
top: '50%',
@ -253,13 +253,13 @@ describe('droptarget', () => {
);
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(droptarget.state).toBe('right');
check(
element
.getElementsByClassName('drop-target-selection')
.getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement,
{
top: '0px',
@ -276,14 +276,14 @@ describe('droptarget', () => {
expect(
(
element
.getElementsByClassName('drop-target-selection')
.getElementsByClassName('dv-drop-target-selection')
.item(0) as HTMLDivElement
).style.transform
).toBe('');
fireEvent.dragLeave(target);
expect(droptarget.state).toBe('center');
viewQuery = element.querySelectorAll('.drop-target');
viewQuery = element.querySelectorAll('.dv-drop-target');
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()
);
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', () => {
@ -34,10 +34,10 @@ describe('tab', () => {
);
cut.setActive(true);
expect(cut.element.className).toBe('tab active-tab');
expect(cut.element.className).toBe('dv-tab dv-active-tab');
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', () => {
@ -85,7 +85,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalled();
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -139,7 +139,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -193,7 +193,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1);
});
@ -253,7 +253,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -313,7 +313,7 @@ describe('tab', () => {
expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).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 emptySpace = cut.element
.getElementsByClassName('void-container')
.getElementsByClassName('dv-void-container')
.item(0);
if (!emptySpace!) {
@ -60,7 +60,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalled();
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -95,7 +95,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel);
const emptySpace = cut.element
.getElementsByClassName('void-container')
.getElementsByClassName('dv-void-container')
.item(0);
if (!emptySpace!) {
@ -126,7 +126,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1);
});
@ -164,7 +164,7 @@ describe('tabsContainer', () => {
cut.openPanel(new TestPanel('panel2', jest.fn() as any));
const emptySpace = cut.element
.getElementsByClassName('void-container')
.getElementsByClassName('dv-void-container')
.item(0);
if (!emptySpace!) {
@ -189,7 +189,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1);
});
@ -227,7 +227,7 @@ describe('tabsContainer', () => {
cut.openPanel(new TestPanel('panel2', jest.fn() as any));
const emptySpace = cut.element
.getElementsByClassName('void-container')
.getElementsByClassName('dv-void-container')
.item(0);
if (!emptySpace!) {
@ -252,7 +252,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1);
});
@ -289,7 +289,7 @@ describe('tabsContainer', () => {
cut.openPanel(new TestPanel('panel2', jest.fn() as any));
const emptySpace = cut.element
.getElementsByClassName('void-container')
.getElementsByClassName('dv-void-container')
.item(0);
if (!emptySpace!) {
@ -320,7 +320,7 @@ describe('tabsContainer', () => {
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(1);
expect(
cut.element.getElementsByClassName('drop-target-dropzone').length
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -341,7 +341,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel);
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);
@ -354,7 +354,7 @@ describe('tabsContainer', () => {
cut.setLeftActionsElement(left);
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[0].children.item(0)?.className).toBe(
@ -369,7 +369,7 @@ describe('tabsContainer', () => {
cut.setLeftActionsElement(left2);
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[0].children.item(0)?.className).toBe(
@ -381,7 +381,7 @@ describe('tabsContainer', () => {
cut.setLeftActionsElement(undefined);
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);
@ -405,7 +405,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel);
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);
@ -418,7 +418,7 @@ describe('tabsContainer', () => {
cut.setRightActionsElement(right);
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[0].children.item(0)?.className).toBe(
@ -433,7 +433,7 @@ describe('tabsContainer', () => {
cut.setRightActionsElement(right2);
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[0].children.item(0)?.className).toBe(
@ -445,7 +445,7 @@ describe('tabsContainer', () => {
cut.setRightActionsElement(undefined);
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);
@ -471,7 +471,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel);
const container = cut.element.querySelector('.void-container')!;
const container = cut.element.querySelector('.dv-void-container')!;
expect(container).toBeTruthy();
jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation(
@ -525,7 +525,7 @@ describe('tabsContainer', () => {
const cut = new TabsContainer(accessor, groupPanel);
const container = cut.element.querySelector('.void-container')!;
const container = cut.element.querySelector('.dv-void-container')!;
expect(container).toBeTruthy();
jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation(
@ -592,7 +592,7 @@ describe('tabsContainer', () => {
const panel = createPanel('test_id');
cut.openPanel(panel);
const el = cut.element.querySelector('.tab')!;
const el = cut.element.querySelector('.dv-tab')!;
expect(el).toBeTruthy();
const event = new KeyboardEvent('mousedown', { shiftKey: true });
@ -651,14 +651,14 @@ describe('tabsContainer', () => {
const panel = new panelMock('test_id');
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!.childNodes.length).toBe(0);
const actions = document.createElement('div');
cut.setPrefixActionsElement(actions);
result = cut.element.querySelector('.pre-actions-container');
result = cut.element.querySelector('.dv-pre-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(actions);
@ -666,14 +666,14 @@ describe('tabsContainer', () => {
const updatedActions = document.createElement('div');
cut.setPrefixActionsElement(updatedActions);
result = cut.element.querySelector('.pre-actions-container');
result = cut.element.querySelector('.dv-pre-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(updatedActions);
cut.setPrefixActionsElement(undefined);
result = cut.element.querySelector('.pre-actions-container');
result = cut.element.querySelector('.dv-pre-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0);
});
@ -718,14 +718,14 @@ describe('tabsContainer', () => {
const panel = new panelMock('test_id');
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!.childNodes.length).toBe(0);
const actions = document.createElement('div');
cut.setLeftActionsElement(actions);
result = cut.element.querySelector('.left-actions-container');
result = cut.element.querySelector('.dv-left-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(actions);
@ -733,14 +733,14 @@ describe('tabsContainer', () => {
const updatedActions = document.createElement('div');
cut.setLeftActionsElement(updatedActions);
result = cut.element.querySelector('.left-actions-container');
result = cut.element.querySelector('.dv-left-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(updatedActions);
cut.setLeftActionsElement(undefined);
result = cut.element.querySelector('.left-actions-container');
result = cut.element.querySelector('.dv-left-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0);
});
@ -785,14 +785,14 @@ describe('tabsContainer', () => {
const panel = new panelMock('test_id');
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!.childNodes.length).toBe(0);
const actions = document.createElement('div');
cut.setRightActionsElement(actions);
result = cut.element.querySelector('.right-actions-container');
result = cut.element.querySelector('.dv-right-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(actions);
@ -800,14 +800,14 @@ describe('tabsContainer', () => {
const updatedActions = document.createElement('div');
cut.setRightActionsElement(updatedActions);
result = cut.element.querySelector('.right-actions-container');
result = cut.element.querySelector('.dv-right-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(1);
expect(result!.childNodes.item(0)).toBe(updatedActions);
cut.setRightActionsElement(undefined);
result = cut.element.querySelector('.right-actions-container');
result = cut.element.querySelector('.dv-right-actions-container');
expect(result).toBeTruthy();
expect(result!.childNodes.length).toBe(0);
});

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

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

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

@ -537,13 +537,13 @@ describe('dockviewComponent', () => {
});
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);
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);
@ -555,19 +555,19 @@ describe('dockviewComponent', () => {
});
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);
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);
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);
@ -2242,17 +2242,17 @@ describe('dockviewComponent', () => {
const group = dockview.getGroupPanel('panel2')!.api.group;
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);
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);
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);
});
@ -2920,21 +2920,21 @@ describe('dockviewComponent', () => {
component: 'default',
});
expect(dockview.element.querySelectorAll('.view').length).toBe(1);
expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1);
const panel2 = dockview.addPanel({
id: 'panel2',
component: 'default',
});
expect(dockview.element.querySelectorAll('.view').length).toBe(1);
expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1);
const panel3 = dockview.addPanel({
id: 'panel3',
component: 'default',
});
expect(dockview.element.querySelectorAll('.view').length).toBe(1);
expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1);
dockview.moveGroupOrPanel({
from: { groupId: panel3.group.id, panelId: panel3.id },
@ -2942,7 +2942,7 @@ describe('dockviewComponent', () => {
});
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({
from: { groupId: panel2.group.id, panelId: panel2.id },
@ -2950,7 +2950,7 @@ describe('dockviewComponent', () => {
});
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({
from: { groupId: panel1.group.id, panelId: panel1.id },
@ -2959,7 +2959,7 @@ describe('dockviewComponent', () => {
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 () => {
@ -3081,13 +3081,15 @@ describe('dockviewComponent', () => {
});
expect(
dockview.element.querySelectorAll('.view-container > .view').length
dockview.element.querySelectorAll('.dv-view-container > .dv-view')
.length
).toBe(1);
dockview.addFloatingGroup(panel1);
expect(
dockview.element.querySelectorAll('.view-container > .view').length
dockview.element.querySelectorAll('.dv-view-container > .dv-view')
.length
).toBe(0);
});
@ -3314,7 +3316,7 @@ describe('dockviewComponent', () => {
groupDragEvents.push(event);
});
const el = dockview.element.querySelector('.tab')!;
const el = dockview.element.querySelector('.dv-tab')!;
expect(el).toBeTruthy();
fireEvent.dragStart(el);
@ -3357,7 +3359,7 @@ describe('dockviewComponent', () => {
groupDragEvents.push(event);
});
const el = dockview.element.querySelector('.void-container')!;
const el = dockview.element.querySelector('.dv-void-container')!;
expect(el).toBeTruthy();
fireEvent.dragStart(el);
@ -3386,7 +3388,7 @@ describe('dockviewComponent', () => {
dockview.layout(1000, 500);
let el = dockview.element.querySelector('.view-container');
let el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0);
@ -3398,7 +3400,7 @@ describe('dockviewComponent', () => {
expect(dockview.groups.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!.childNodes.length).toBeGreaterThan(0);
@ -3452,7 +3454,7 @@ describe('dockviewComponent', () => {
expect(dockview.groups.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!.childNodes.length).toBe(0);
});
@ -3477,7 +3479,7 @@ describe('dockviewComponent', () => {
dockview.layout(1000, 500);
let el = dockview.element.querySelector('.view-container');
let el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0);
@ -3498,7 +3500,7 @@ describe('dockviewComponent', () => {
el = dockview.element.querySelector('.dv-resize-container');
expect(el).toBeTruthy();
el = dockview.element.querySelector('.view-container');
el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy();
expect(el!.childNodes.length).toBeGreaterThan(0);
@ -3578,7 +3580,7 @@ describe('dockviewComponent', () => {
el = dockview.element.querySelector('.dv-resize-container');
expect(el).toBeFalsy();
el = dockview.element.querySelector('.view-container');
el = dockview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0);
});

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

@ -496,12 +496,12 @@ describe('dockviewGroupPanelModel', () => {
test('default', () => {
let viewQuery = groupview.element.querySelectorAll(
'.groupview > .tabs-and-actions-container'
'.dv-groupview > .dv-tabs-and-actions-container'
);
expect(viewQuery).toBeTruthy();
viewQuery = groupview.element.querySelectorAll(
'.groupview > .content-container'
'.dv-groupview > .dv-content-container'
);
expect(viewQuery).toBeTruthy();
});
@ -636,7 +636,7 @@ describe('dockviewGroupPanelModel', () => {
null as any
);
const contentContainer = groupviewContainer
.getElementsByClassName('content-container')
.getElementsByClassName('dv-content-container')
.item(0)!.childNodes;
const panel1 = new TestPanel('id_1', panelApi);
@ -706,7 +706,7 @@ describe('dockviewGroupPanelModel', () => {
});
const element = container
.getElementsByClassName('content-container')
.getElementsByClassName('dv-content-container')
.item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -720,7 +720,7 @@ describe('dockviewGroupPanelModel', () => {
expect(counter).toBe(1);
expect(
element.getElementsByClassName('drop-target-dropzone').length
element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -766,7 +766,7 @@ describe('dockviewGroupPanelModel', () => {
});
const element = container
.getElementsByClassName('content-container')
.getElementsByClassName('dv-content-container')
.item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -786,7 +786,7 @@ describe('dockviewGroupPanelModel', () => {
cut.locked = false;
run(10);
expect(
element.getElementsByClassName('drop-target-dropzone').length
element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1);
fireEvent.dragEnd(element);
@ -794,7 +794,7 @@ describe('dockviewGroupPanelModel', () => {
cut.locked = 'no-drop-target';
run(10);
expect(
element.getElementsByClassName('drop-target-dropzone').length
element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
fireEvent.dragEnd(element);
@ -802,7 +802,7 @@ describe('dockviewGroupPanelModel', () => {
cut.locked = true;
run(10);
expect(
element.getElementsByClassName('drop-target-dropzone').length
element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1);
fireEvent.dragEnd(element);
@ -810,7 +810,7 @@ describe('dockviewGroupPanelModel', () => {
cut.locked = true;
run(25);
expect(
element.getElementsByClassName('drop-target-dropzone').length
element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
fireEvent.dragEnd(element);
});
@ -864,7 +864,7 @@ describe('dockviewGroupPanelModel', () => {
cut.openPanel(new TestPanel('panel1', panelApi));
const element = container
.getElementsByClassName('content-container')
.getElementsByClassName('dv-content-container')
.item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -883,7 +883,7 @@ describe('dockviewGroupPanelModel', () => {
expect(counter).toBe(0);
expect(
element.getElementsByClassName('drop-target-dropzone').length
element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -937,7 +937,7 @@ describe('dockviewGroupPanelModel', () => {
cut.openPanel(new TestPanel('panel2', panelApi));
const element = container
.getElementsByClassName('content-container')
.getElementsByClassName('dv-content-container')
.item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -956,7 +956,7 @@ describe('dockviewGroupPanelModel', () => {
expect(counter).toBe(0);
expect(
element.getElementsByClassName('drop-target-dropzone').length
element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -1010,7 +1010,7 @@ describe('dockviewGroupPanelModel', () => {
cut.openPanel(new TestPanel('panel2', panelApi));
const element = container
.getElementsByClassName('content-container')
.getElementsByClassName('dv-content-container')
.item(0)!;
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
@ -1029,7 +1029,7 @@ describe('dockviewGroupPanelModel', () => {
expect(counter).toBe(1);
expect(
element.getElementsByClassName('drop-target-dropzone').length
element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});
@ -1114,7 +1114,7 @@ describe('dockviewGroupPanelModel', () => {
container.getElementsByClassName('watermark-test-container').length
).toBe(0);
expect(
container.getElementsByClassName('tabs-and-actions-container')
container.getElementsByClassName('dv-tabs-and-actions-container')
.length
).toBe(1);

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

@ -2594,7 +2594,7 @@ describe('gridview', () => {
components: { default: TestGridview },
});
let el = gridview.element.querySelector('.view-container');
let el = gridview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy();
expect(el!.childNodes.length).toBe(0);
@ -2661,7 +2661,7 @@ describe('gridview', () => {
expect(gridview.groups.length).toBe(0);
el = gridview.element.querySelector('.view-container');
el = gridview.element.querySelector('.dv-view-container');
expect(el).toBeTruthy();
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);
const viewQuery = container.querySelectorAll(
'.split-view-container horizontal'
'.dv-split-view-container dv-horizontal'
);
expect(viewQuery).toBeTruthy();
@ -111,7 +111,7 @@ describe('splitview', () => {
expect(splitview.orientation).toBe(Orientation.VERTICAL);
const viewQuery = container.querySelectorAll(
'.split-view-container vertical'
'.dv-split-view-container dv-vertical'
);
expect(viewQuery).toBeTruthy();
@ -128,48 +128,48 @@ describe('splitview', () => {
splitview.addView(new Testview(50, 50));
let viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view'
'.dv-split-view-container > .dv-view-container > .dv-view'
);
expect(viewQuery.length).toBe(3);
let sashQuery = container.querySelectorAll(
'.split-view-container > .sash-container > .sash'
'.dv-split-view-container > .dv-sash-container > .dv-sash'
);
expect(sashQuery.length).toBe(2);
splitview.removeView(2);
viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view'
'.dv-split-view-container > .dv-view-container > .dv-view'
);
expect(viewQuery.length).toBe(2);
sashQuery = container.querySelectorAll(
'.split-view-container > .sash-container > .sash'
'.dv-split-view-container > .dv-sash-container > .dv-sash'
);
expect(sashQuery.length).toBe(1);
splitview.removeView(0);
viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view'
'.dv-split-view-container > .dv-view-container > .dv-view'
);
expect(viewQuery.length).toBe(1);
sashQuery = container.querySelectorAll(
'.split-view-container > .sash-container > .sash'
'.dv-split-view-container > .dv-sash-container > .dv-sash'
);
expect(sashQuery.length).toBe(0);
splitview.removeView(0);
viewQuery = container.querySelectorAll(
'.split-view-container > .view-container > .view'
'.dv-split-view-container > .dv-view-container > .dv-view'
);
expect(viewQuery.length).toBe(0);
sashQuery = container.querySelectorAll(
'.split-view-container > .sash-container > .sash'
'.dv-split-view-container > .dv-sash-container > .dv-sash'
);
expect(sashQuery.length).toBe(0);
@ -188,14 +188,14 @@ describe('splitview', () => {
splitview.addView(view2);
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);
splitview.setViewVisible(1, false);
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);
@ -619,7 +619,7 @@ describe('splitview', () => {
);
const sashElement = container
.getElementsByClassName('sash')
.getElementsByClassName('dv-sash')
.item(0) as HTMLElement;
// validate the expected state before drag
@ -803,7 +803,7 @@ describe('splitview', () => {
let viewQuery = Array.from(
container
.querySelectorAll(
'.split-view-container > .view-container > .view'
'.dv-split-view-container > .dv-view-container > .dv-view'
)
.entries()
)
@ -818,7 +818,7 @@ describe('splitview', () => {
let sashQuery = Array.from(
container
.querySelectorAll(
'.split-view-container > .sash-container > .sash'
'.dv-split-view-container > .dv-sash-container > .dv-sash'
)
.entries()
)
@ -860,7 +860,7 @@ describe('splitview', () => {
viewQuery = Array.from(
container
.querySelectorAll(
'.split-view-container > .view-container > .view'
'.dv-split-view-container > .dv-view-container > .dv-view'
)
.entries()
)
@ -875,7 +875,7 @@ describe('splitview', () => {
sashQuery = Array.from(
container
.querySelectorAll(
'.split-view-container > .sash-container > .sash'
'.dv-split-view-container > .dv-sash-container > .dv-sash'
)
.entries()
)

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

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

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

@ -196,13 +196,13 @@ export class Droptarget extends CompositeDisposable {
if (!this.targetElement) {
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.className = 'drop-target-selection';
this.overlayElement.className = 'dv-drop-target-selection';
this._state = 'center';
this.targetElement.appendChild(this.overlayElement);
this.element.classList.add('drop-target');
this.element.classList.add('dv-drop-target');
this.element.append(this.targetElement);
}
@ -399,7 +399,7 @@ export class Droptarget extends CompositeDisposable {
this.element.removeChild(this.targetElement);
this.targetElement = 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();
this._element = document.createElement('div');
this._element.className = 'content-container';
this._element.className = 'dv-content-container';
this._element.tabIndex = -1;
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) */
}
.tab {
.dv-tab {
flex-shrink: 0;
&:focus-within,
@ -33,7 +33,7 @@
}
}
&.active-tab {
&.dv-active-tab {
.dv-default-tab {
.dv-default-tab-action {
visibility: visible;
@ -41,7 +41,7 @@
}
}
&.inactive-tab {
&.dv-inactive-tab {
.dv-default-tab {
.dv-default-tab-action {
visibility: hidden;

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

@ -72,11 +72,11 @@ export class Tab extends CompositeDisposable {
super();
this._element = document.createElement('div');
this._element.className = 'tab';
this._element.className = 'dv-tab';
this._element.tabIndex = 0;
this._element.draggable = true;
toggleClass(this.element, 'inactive-tab', true);
toggleClass(this.element, 'dv-inactive-tab', true);
const dragHandler = new TabDragHandler(
this._element,
@ -139,8 +139,8 @@ export class Tab extends CompositeDisposable {
}
public setActive(isActive: boolean): void {
toggleClass(this.element, 'active-tab', isActive);
toggleClass(this.element, 'inactive-tab', !isActive);
toggleClass(this.element, 'dv-active-tab', isActive);
toggleClass(this.element, 'dv-inactive-tab', !isActive);
}
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;
background-color: var(--dv-tabs-and-actions-container-background-color);
flex-shrink: 0;
@ -6,31 +6,27 @@
height: var(--dv-tabs-and-actions-container-height);
font-size: var(--dv-tabs-and-actions-container-font-size);
&.hidden {
display: none;
}
&.dv-single-tab.dv-full-width-single-tab {
.tabs-container {
.dv-tabs-container {
flex-grow: 1;
.tab {
.dv-tab {
flex-grow: 1;
}
}
.void-container {
.dv-void-container {
flex-grow: 0;
}
}
.void-container {
.dv-void-container {
display: flex;
flex-grow: 1;
cursor: grab;
}
.tabs-container {
.dv-tabs-container {
display: flex;
overflow-x: overlay;
overflow-y: hidden;
@ -51,7 +47,7 @@
background: var(--dv-tabs-container-scrollbar-color);
}
.tab {
.dv-tab {
-webkit-user-drag: element;
outline: none;
min-width: 75px;

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

@ -176,7 +176,7 @@ export class TabsContainer
super();
this._element = document.createElement('div');
this._element.className = 'tabs-and-actions-container';
this._element.className = 'dv-tabs-and-actions-container';
toggleClass(
this._element,
@ -185,16 +185,16 @@ export class TabsContainer
);
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.className = 'left-actions-container';
this.leftActionsContainer.className = 'dv-left-actions-container';
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.className = 'tabs-container';
this.tabContainer.className = 'dv-tabs-container';
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.className = 'void-container';
this._element.className = 'dv-void-container';
this._element.tabIndex = 0;
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;
width: 100%;
&.has-actions {
.watermark-title {
.actions-container {
&.dv-has-actions {
.dv-watermark-title {
.dv-actions-container {
display: none;
}
}
}
.watermark-title {
.dv-watermark-title {
height: 35px;
width: 100%;
display: flex;
}
.watermark-content {
.dv-watermark-content {
flex-grow: 1;
}
.actions-container {
.dv-actions-container {
display: flex;
align-items: center;
padding: 0px 8px;
.close-action {
.dv-close-action {
padding: 4px;
display: flex;
align-items: center;

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

@ -25,25 +25,25 @@ export class Watermark
constructor() {
super();
this._element = document.createElement('div');
this._element.className = 'watermark';
this._element.className = 'dv-watermark';
const title = document.createElement('div');
title.className = 'watermark-title';
title.className = 'dv-watermark-title';
const emptySpace = document.createElement('span');
emptySpace.style.flexGrow = '1';
const content = document.createElement('div');
content.className = 'watermark-content';
content.className = 'dv-watermark-content';
this._element.appendChild(title);
this._element.appendChild(content);
const actionsContainer = document.createElement('div');
actionsContainer.className = 'actions-container';
actionsContainer.className = 'dv-actions-container';
const closeAnchor = document.createElement('div');
closeAnchor.className = 'close-action';
closeAnchor.className = 'dv-close-action';
closeAnchor.appendChild(createCloseButton());
actionsContainer.appendChild(closeAnchor);
@ -89,6 +89,6 @@ export class Watermark
private render(): void {
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 {
&.active-group {
> .tabs-and-actions-container > .tabs-container > .tab {
&.active-tab {
.dv-groupview {
&.dv-active-group {
> .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab {
&.dv-active-tab {
background-color: var(
--dv-activegroup-visiblepanel-tab-background-color
);
color: var(--dv-activegroup-visiblepanel-tab-color);
}
&.inactive-tab {
&.dv-inactive-tab {
background-color: var(
--dv-activegroup-hiddenpanel-tab-background-color
);
@ -33,15 +33,15 @@
}
}
}
&.inactive-group {
> .tabs-and-actions-container > .tabs-container > .tab {
&.active-tab {
&.dv-inactive-group {
> .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab {
&.dv-active-tab {
background-color: var(
--dv-inactivegroup-visiblepanel-tab-background-color
);
color: var(--dv-inactivegroup-visiblepanel-tab-color);
}
&.inactive-tab {
&.dv-inactive-tab {
background-color: var(
--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
* therefore we also set some stylings for the dragging event
**/
.tab {
.dv-tab {
&.dv-tab-dragging {
background-color: var(
--dv-activegroup-visiblepanel-tab-background-color

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

@ -916,7 +916,7 @@ export class DockviewComponent
DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
});
const el = group.element.querySelector('.void-container');
const el = group.element.querySelector('.dv-void-container');
if (!el) {
throw new Error('failed to find drag handle');
@ -1108,7 +1108,7 @@ export class DockviewComponent
if (!this.activeGroup) {
return;
}
options.group = this.activeGroup;
options.group = this.activeGroup;
}
if (options.includePanel && options.group) {

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

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

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

@ -338,7 +338,7 @@ export class DockviewGroupPanelModel
toggleClass(
this.container,
'locked-groupview',
'dv-locked-groupview',
value === 'no-drop-target' || value
);
}
@ -432,7 +432,7 @@ export class DockviewGroupPanelModel
) {
super();
toggleClass(this.container, 'groupview', true);
toggleClass(this.container, 'dv-groupview', true);
this._api = new DockviewApi(this.accessor);
@ -802,8 +802,8 @@ export class DockviewGroupPanelModel
this._isGroupActive = isGroupActive;
toggleClass(this.container, 'active-group', isGroupActive);
toggleClass(this.container, 'inactive-group', !isGroupActive);
toggleClass(this.container, 'dv-active-group', isGroupActive);
toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
this.tabsContainer.setActive(this.isActive);
@ -952,7 +952,7 @@ export class DockviewGroupPanelModel
}
private updateContainer(): void {
toggleClass(this.container, 'empty', this.isEmpty);
toggleClass(this.container, 'dv-empty', this.isEmpty);
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.element = document.createElement('div');
this.element.className = 'branch-node';
this.element.className = 'dv-branch-node';
if (!childDescriptors) {
this.splitview = new Splitview(this.element, {

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

@ -1,5 +1,5 @@
.grid-view,
.branch-node {
.dv-grid-view,
.dv-branch-node {
height: 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');
}
if (/\bgrid-view\b/.test(parentElement.className)) {
if (/\bdv-grid-view\b/.test(parentElement.className)) {
return [];
}
@ -711,7 +711,7 @@ export class Gridview implements IDisposable {
margin?: number
) {
this.element = document.createElement('div');
this.element.className = 'grid-view';
this.element.className = 'dv-grid-view';
this._locked = locked ?? false;
this._margin = margin ?? 0;

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

@ -26,11 +26,11 @@ export class DefaultHeader
super();
this._element = document.createElement('div');
this.element.className = 'default-header';
this.element.className = 'dv-default-header';
this._content = document.createElement('span');
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._content);

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

@ -1,14 +1,14 @@
.pane-container {
.dv-pane-container {
height: 100%;
width: 100%;
&.animated {
.view {
&.dv-animated {
.dv-view {
transition-duration: 0.15s;
transition-timing-function: ease-out;
}
}
.view {
.dv-view {
overflow: hidden;
display: flex;
flex-direction: column;
@ -19,19 +19,19 @@
}
&:not(:first-child) {
.pane > .pane-header {
.dv-pane > .dv-pane-header {
border-top: 1px solid var(--dv-paneview-header-border-color);
}
}
.default-header {
.dv-default-header {
background-color: var(--dv-group-view-background-color);
color: var(--dv-activegroup-visiblepanel-tab-color);
display: flex;
padding: 0px 8px;
cursor: pointer;
.dockview-pane-header-icon {
.dv-pane-header-icon {
display: flex;
justify-content: 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;
}
.pane {
.dv-pane {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
.pane-header {
.dv-pane-header {
box-sizing: border-box;
user-select: none;
position: relative;
outline: none;
&.pane-draggable {
&.dv-pane-draggable {
cursor: pointer;
}
@ -83,7 +83,7 @@
}
}
}
.pane-body {
.dv-pane-body {
overflow-y: auto;
overflow-x: hidden;
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.element = document.createElement('div');
this.element.className = 'pane-container';
this.element.className = 'dv-pane-container';
container.appendChild(this.element);
@ -190,11 +190,11 @@ export class Paneview extends CompositeDisposable implements IDisposable {
this.animationTimer = undefined;
}
addClasses(this.element, 'animated');
addClasses(this.element, 'dv-animated');
this.animationTimer = setTimeout(() => {
this.animationTimer = undefined;
removeClasses(this.element, 'animated');
removeClasses(this.element, 'dv-animated');
}, 200);
}

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

@ -175,7 +175,7 @@ export abstract class PaneviewPanel
this._orientation = orientation;
this.element.classList.add('pane');
this.element.classList.add('dv-pane');
this.addDisposables(
this.api.onWillVisibilityChange((event) => {
@ -310,7 +310,7 @@ export abstract class PaneviewPanel
this.header = document.createElement('div');
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.lineHeight = `${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.className = 'pane-body';
this.body.className = 'dv-pane-body';
this.element.appendChild(this.body);
}

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

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

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

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

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

@ -1,4 +1,4 @@
.dockview-svg {
.dv-svg {
display: inline-block;
fill: currentcolor;
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, 'aria-hidden', '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');
path.setAttributeNS(null, 'd', params.path);
svg.appendChild(path);

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

@ -79,22 +79,22 @@
--dv-inactivegroup-visiblepanel-tab-color: white;
--dv-inactivegroup-hiddenpanel-tab-color: white;
.groupview {
&.active-group {
> .tabs-and-actions-container {
.dv-groupview {
&.dv-active-group {
> .dv-tabs-and-actions-container {
box-sizing: content-box;
border-bottom: 2px solid
var(--dv-activegroup-visiblepanel-tab-background-color);
.tab {
&.active-tab {
.dv-tab {
&.dv-active-tab {
border-top: 2px solid
var(
--dv-activegroup-visiblepanel-tab-background-color
);
}
&.inactive-tab {
&.dv-inactive-tab {
border-top: 2px solid
var(
--dv-activegroup-hiddenpanel-tab-background-color
@ -103,21 +103,21 @@
}
}
}
&.inactive-group {
> .tabs-and-actions-container {
&.dv-inactive-group {
> .dv-tabs-and-actions-container {
box-sizing: content-box;
border-bottom: 2px solid
var(--dv-inactivegroup-visiblepanel-tab-background-color);
.tab {
&.active-tab {
.dv-tab {
&.dv-active-tab {
border-top: 2px solid
var(
--dv-inactivegroup-visiblepanel-tab-background-color
);
}
&.inactive-tab {
&.dv-inactive-tab {
border-top: 2px solid
var(
--dv-inactivegroup-hiddenpanel-tab-background-color
@ -176,11 +176,11 @@
--dv-paneview-active-outline-color: #6272a4;
.groupview {
&.active-group {
> .tabs-and-actions-container {
> .tabs-container {
> .tab.active-tab {
.dv-groupview {
&.dv-active-group {
> .dv-tabs-and-actions-container {
> .dv-tabs-container {
> .dv-tab.dv-active-tab {
position: relative;
&::after {
@ -197,10 +197,10 @@
}
}
}
&.inactive-group {
> .tabs-and-actions-container {
> .tabs-container {
> .tab.active-tab {
&.dv-inactive-group {
> .dv-tabs-and-actions-container {
> .dv-tabs-container {
> .dv-tab.dv-active-tab {
position: relative;
&::after {
@ -229,20 +229,20 @@
}
@mixin dockview-design-replit-mixin {
.dv-resize-container:has(> .groupview) {
.dv-resize-container:has(> .dv-groupview) {
border-radius: 8px;
}
.groupview {
.dv-groupview {
overflow: hidden;
border-radius: 10px;
.tabs-and-actions-container {
.tab {
.dv-tabs-and-actions-container {
.dv-tab {
margin: 4px;
border-radius: 8px;
.dockview-svg {
.dv-svg {
height: 8px;
width: 8px;
}
@ -254,20 +254,20 @@
border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}
.content-container {
.dv-content-container {
background-color: #fcfcfc;
}
&.active-group {
&.dv-active-group {
border: 1px solid rgba(128, 128, 128, 0.35);
}
&.inactive-group {
&.dv-inactive-group {
border: 1px solid transparent;
}
}
.vertical > .sash-container > .sash {
.dv-vertical > .dv-sash-container > .dv-sash {
&:not(.disabled) {
&::after {
@ -292,7 +292,7 @@
}
}
.horizontal > .sash-container > .sash {
.dv-horizontal > .dv-sash-container > .dv-sash {
&:not(.disabled) {
&::after {
content: '';