diff --git a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts index c883a20f8..e766c9609 100644 --- a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts +++ b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts @@ -1,16 +1,16 @@ import { DockviewPanelApiImpl } from '../../api/dockviewPanelApi'; import { DockviewComponent } from '../../dockview/dockviewComponent'; -import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel'; +import { DockviewPanel } from '../../dockview/dockviewPanel'; import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; import { fromPartial } from '@total-typescript/shoehorn'; describe('groupPanelApi', () => { test('title', () => { - const accessor: Partial = { + const accessor = fromPartial({ onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), options: { parentElement: document.createElement('div') }, - }; + }); const panelMock = jest.fn(() => { return { @@ -46,11 +46,12 @@ describe('groupPanelApi', () => { update: jest.fn(), }; - const accessor: Partial = { + const accessor = fromPartial({ onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), options: { parentElement: document.createElement('div') }, - }; + }); + const groupViewPanel = new DockviewGroupPanel( accessor, '', @@ -77,11 +78,12 @@ describe('groupPanelApi', () => { id: 'test_id', }; - const accessor: Partial = { + const accessor = fromPartial({ onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), options: { parentElement: document.createElement('div') }, - }; + }); + const groupViewPanel = new DockviewGroupPanel( accessor, '', diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts index 0b5c780e2..ecb79212e 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts @@ -13,13 +13,12 @@ import { fromPartial } from '@total-typescript/shoehorn'; describe('tabsContainer', () => { test('that an external event does not render a drop target and calls through to the group mode', () => { - const accessorMock = jest.fn, []>(() => { - return { - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, - }; + const accessor = fromPartial({ + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + options: { parentElement: document.createElement('div') }, }); + const groupviewMock = jest.fn, []>( () => { return { @@ -36,14 +35,13 @@ describe('tabsContainer', () => { }; }); - const accessor = new accessorMock() as DockviewComponent; const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); const emptySpace = cut.element .getElementsByClassName('void-container') - .item(0) + .item(0); if (!emptySpace!) { fail('element not found'); @@ -67,14 +65,13 @@ describe('tabsContainer', () => { }); test('that a drag over event from another tab should render a drop target', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, - }; + const accessor = fromPartial({ + id: 'testcomponentid', + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + options: { parentElement: document.createElement('div') }, }); + const groupviewMock = jest.fn, []>( () => { return { @@ -93,7 +90,6 @@ describe('tabsContainer', () => { }; }); - const accessor = new accessorMock() as DockviewComponent; const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); @@ -135,14 +131,13 @@ describe('tabsContainer', () => { }); test('that dropping over the empty space should render a drop target', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, - }; + const accessor = fromPartial({ + id: 'testcomponentid', + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + options: { parentElement: document.createElement('div') }, }); + const groupviewMock = jest.fn, []>( () => { return { @@ -161,7 +156,6 @@ describe('tabsContainer', () => { }; }); - const accessor = new accessorMock() as DockviewComponent; const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); @@ -200,14 +194,13 @@ describe('tabsContainer', () => { }); test('that dropping the first tab should render a drop target', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, - }; + const accessor = fromPartial({ + id: 'testcomponentid', + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + options: { parentElement: document.createElement('div') }, }); + const groupviewMock = jest.fn, []>( () => { return { @@ -226,7 +219,6 @@ describe('tabsContainer', () => { }; }); - const accessor = new accessorMock() as DockviewComponent; const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); @@ -265,14 +257,13 @@ describe('tabsContainer', () => { }); test('that dropping a tab from another component should not render a drop target', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, - }; + const accessor = fromPartial({ + id: 'testcomponentid', + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + options: { parentElement: document.createElement('div') }, }); + const groupviewMock = jest.fn, []>( () => { return { @@ -290,7 +281,6 @@ describe('tabsContainer', () => { }; }); - const accessor = new accessorMock() as DockviewComponent; const groupPanel = new groupPanelMock() as DockviewGroupPanel; const cut = new TabsContainer(accessor, groupPanel); @@ -335,19 +325,17 @@ describe('tabsContainer', () => { }); test('left actions', () => { - const accessorMock = jest.fn(() => { - return (>{ - options: { parentElement: document.createElement('div') }, - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - }) as DockviewComponent; + const accessor = fromPartial({ + id: 'testcomponentid', + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + options: { parentElement: document.createElement('div') }, }); const groupPanelMock = jest.fn(() => { return (>{}) as DockviewGroupPanel; }); - const accessor = new accessorMock(); const groupPanel = new groupPanelMock(); const cut = new TabsContainer(accessor, groupPanel); @@ -401,19 +389,17 @@ describe('tabsContainer', () => { }); test('right actions', () => { - const accessorMock = jest.fn(() => { - return (>{ - options: { parentElement: document.createElement('div') }, - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - }) as DockviewComponent; + const accessor = fromPartial({ + id: 'testcomponentid', + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + options: { parentElement: document.createElement('div') }, }); const groupPanelMock = jest.fn(() => { return (>{}) as DockviewGroupPanel; }); - const accessor = new accessorMock(); const groupPanel = new groupPanelMock(); const cut = new TabsContainer(accessor, groupPanel); @@ -467,14 +453,12 @@ describe('tabsContainer', () => { }); test('that a tab will become floating when clicked if not floating and shift is selected', () => { - const accessorMock = jest.fn(() => { - return (>{ - options: { parentElement: document.createElement('div') }, - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - element: document.createElement('div'), - addFloatingGroup: jest.fn(), - }) as DockviewComponent; + const accessor = fromPartial({ + options: { parentElement: document.createElement('div') }, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), }); const groupPanelMock = jest.fn(() => { @@ -483,7 +467,6 @@ describe('tabsContainer', () => { }) as DockviewGroupPanel; }); - const accessor = new accessorMock(); const groupPanel = new groupPanelMock(); const cut = new TabsContainer(accessor, groupPanel); @@ -527,14 +510,12 @@ describe('tabsContainer', () => { }); test('that a tab that is already floating cannot be floated again', () => { - const accessorMock = jest.fn(() => { - return (>{ - options: { parentElement: document.createElement('div') }, - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - element: document.createElement('div'), - addFloatingGroup: jest.fn(), - }) as DockviewComponent; + const accessor = fromPartial({ + options: { parentElement: document.createElement('div') }, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), }); const groupPanelMock = jest.fn(() => { @@ -543,7 +524,6 @@ describe('tabsContainer', () => { }) as DockviewGroupPanel; }); - const accessor = new accessorMock(); const groupPanel = new groupPanelMock(); const cut = new TabsContainer(accessor, groupPanel); @@ -579,15 +559,13 @@ describe('tabsContainer', () => { }); test('that selecting a tab with shift down will move that tab into a new floating group', () => { - const accessorMock = jest.fn(() => { - return (>{ - options: { parentElement: document.createElement('div') }, - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - element: document.createElement('div'), - addFloatingGroup: jest.fn(), - getGroupPanel: jest.fn(), - }) as DockviewComponent; + const accessor = fromPartial({ + options: { parentElement: document.createElement('div') }, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), + getGroupPanel: jest.fn(), }); const groupPanelMock = jest.fn(() => { @@ -597,7 +575,6 @@ describe('tabsContainer', () => { }) as DockviewGroupPanel; }); - const accessor = new accessorMock(); const groupPanel = new groupPanelMock(); const cut = new TabsContainer(accessor, groupPanel); @@ -638,15 +615,13 @@ describe('tabsContainer', () => { }); test('pre header actions', () => { - const accessorMock = jest.fn(() => { - return (>{ - options: { parentElement: document.createElement('div') }, - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - element: document.createElement('div'), - addFloatingGroup: jest.fn(), - getGroupPanel: jest.fn(), - }) as DockviewComponent; + const accessor = fromPartial({ + options: { parentElement: document.createElement('div') }, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), + getGroupPanel: jest.fn(), }); const groupPanelMock = jest.fn(() => { @@ -656,7 +631,6 @@ describe('tabsContainer', () => { }) as DockviewGroupPanel; }); - const accessor = new accessorMock(); const groupPanel = new groupPanelMock(); const cut = new TabsContainer(accessor, groupPanel); @@ -708,15 +682,13 @@ describe('tabsContainer', () => { }); test('left header actions', () => { - const accessorMock = jest.fn(() => { - return (>{ - options: { parentElement: document.createElement('div') }, - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - element: document.createElement('div'), - addFloatingGroup: jest.fn(), - getGroupPanel: jest.fn(), - }) as DockviewComponent; + const accessor = fromPartial({ + options: { parentElement: document.createElement('div') }, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), + getGroupPanel: jest.fn(), }); const groupPanelMock = jest.fn(() => { @@ -726,7 +698,6 @@ describe('tabsContainer', () => { }) as DockviewGroupPanel; }); - const accessor = new accessorMock(); const groupPanel = new groupPanelMock(); const cut = new TabsContainer(accessor, groupPanel); @@ -778,15 +749,13 @@ describe('tabsContainer', () => { }); test('right header actions', () => { - const accessorMock = jest.fn(() => { - return (>{ - options: { parentElement: document.createElement('div') }, - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - element: document.createElement('div'), - addFloatingGroup: jest.fn(), - getGroupPanel: jest.fn(), - }) as DockviewComponent; + const accessor = fromPartial({ + options: { parentElement: document.createElement('div') }, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), + getGroupPanel: jest.fn(), }); const groupPanelMock = jest.fn(() => { @@ -796,7 +765,6 @@ describe('tabsContainer', () => { }) as DockviewGroupPanel; }); - const accessor = new accessorMock(); const groupPanel = new groupPanelMock(); const cut = new TabsContainer(accessor, groupPanel); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index cc8357b48..569670d09 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -103,8 +103,16 @@ describe('dockviewComponent', () => { dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -1225,7 +1233,25 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { default: PanelContentPartTest }, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } + }, }); dockview.layout(500, 1000); @@ -1250,7 +1276,25 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { default: PanelContentPartTest }, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } + }, }); dockview.layout(500, 1000); @@ -1285,7 +1329,25 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { default: PanelContentPartTest }, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } + }, }); dockview.layout(500, 1000); @@ -1310,8 +1372,24 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, }); @@ -1350,8 +1428,24 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, }); @@ -1390,8 +1484,24 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, }); @@ -1428,8 +1538,24 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, }); @@ -1463,8 +1589,24 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, }); @@ -1498,8 +1640,24 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, }); @@ -1543,7 +1701,25 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { default: PanelContentPartTest }, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } + }, }); dockview.layout(500, 1000); @@ -1753,8 +1929,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); dockview.fromJSON({ @@ -1839,11 +2023,24 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, }); @@ -1891,7 +2088,7 @@ describe('dockviewComponent', () => { panel2: { id: 'panel2', contentComponent: 'default', - tabComponent: 'test_tab_id', + tabComponent: 'default', title: 'panel2', }, }, @@ -1937,7 +2134,7 @@ describe('dockviewComponent', () => { panel2: { id: 'panel2', contentComponent: 'default', - tabComponent: 'test_tab_id', + tabComponent: 'default', title: 'panel2', }, }, @@ -1949,11 +2146,24 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createTabComponent(options) { + switch (options.name) { + case 'default': + return new PanelTabPartTest(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, }); dockview.fromJSON({ @@ -1997,7 +2207,7 @@ describe('dockviewComponent', () => { panel2: { id: 'panel2', contentComponent: 'default', - tabComponent: 'test_tab_id', + tabComponent: 'default', title: 'panel2', }, panel3: { @@ -2035,11 +2245,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2141,11 +2356,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2282,11 +2503,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2410,11 +2637,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2469,11 +2702,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2485,11 +2724,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2524,11 +2769,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2552,11 +2802,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2638,11 +2893,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2700,11 +2960,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2790,11 +3055,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2821,11 +3091,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -2853,11 +3128,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3002,11 +3282,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3041,11 +3326,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3080,12 +3370,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - panelA: PanelContentPartTest, - panelB: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'panelA': + case 'panelB': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported panel '${options.name}'`); + } }, }); @@ -3152,9 +3447,7 @@ describe('dockviewComponent', () => { }, activeGroup: '1', }); - }).toThrow( - "Cannot create 'panelB', no component 'somethingBad' provided" - ); + }).toThrow("unsupported panel 'somethingBad'"); expect(dockview.groups.length).toBe(0); expect(dockview.panels.length).toBe(0); @@ -3169,12 +3462,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - panelA: PanelContentPartTest, - panelB: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'panelA': + case 'panelB': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported panel '${options.name}'`); + } }, }); @@ -3273,7 +3571,7 @@ describe('dockviewComponent', () => { }, activeGroup: '1', }); - }).toThrow("Cannot create 'panelC', no component 'panelC' provided"); + }).toThrow("unsupported panel 'panelC'"); expect(dockview.groups.length).toBe(0); expect(dockview.panels.length).toBe(0); @@ -3291,12 +3589,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - panelA: PanelContentPartTest, - panelB: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'panelA': + case 'panelB': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3308,12 +3611,17 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - panelA: PanelContentPartTest, - panelB: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'panelA': + case 'panelB': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, disableAutoResizing: true, }); @@ -3327,11 +3635,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3354,11 +3667,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3396,11 +3714,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3438,11 +3761,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3488,11 +3816,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3538,11 +3871,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3588,11 +3926,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3646,11 +3989,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3688,11 +4036,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3730,11 +4083,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3780,11 +4138,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3830,11 +4193,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3880,11 +4248,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3938,11 +4311,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -3988,11 +4366,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4037,11 +4420,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4087,11 +4475,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4136,11 +4529,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4175,11 +4573,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4213,11 +4616,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4252,11 +4660,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4312,11 +4725,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4350,11 +4768,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4382,11 +4805,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4454,11 +4882,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4498,11 +4931,16 @@ describe('dockviewComponent', () => { dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); @@ -4551,11 +4989,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, - }, - tabComponents: { - test_tab_id: PanelTabPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); const api = new DockviewApi(dockview); @@ -4660,8 +5103,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); const api = new DockviewApi(dockview); @@ -4687,8 +5138,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); const api = new DockviewApi(dockview); @@ -4716,8 +5175,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); const api = new DockviewApi(dockview); @@ -4745,8 +5212,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); const api = new DockviewApi(dockview); @@ -4773,8 +5248,16 @@ describe('dockviewComponent', () => { const dockview = new DockviewComponent({ parentElement: container, - components: { - default: PanelContentPartTest, + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } }, }); const api = new DockviewApi(dockview); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts index 8fba35820..f67443350 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts @@ -275,7 +275,7 @@ describe('dockviewGroupPanelModel', () => { onDidParametersChange: new Emitter().event, }); - dockview = (>{ + dockview = fromPartial({ options: { parentElement: document.createElement('div') }, createWatermarkComponent: () => new Watermark(), doSetGroupActive: jest.fn(), @@ -287,7 +287,7 @@ describe('dockviewGroupPanelModel', () => { overlayRenderContainer: new OverlayRenderContainer( document.createElement('div') ), - }) as DockviewComponent; + }); groupview = new DockviewGroupPanel(dockview, 'groupview-1', options); groupview.initialize(); @@ -529,8 +529,13 @@ describe('dockviewGroupPanelModel', () => { test('that group is set on panel during onDidAddPanel event', () => { const cut = new DockviewComponent({ parentElement: document.createElement('div'), - components: { - component: TestContentPart, + createComponent(options) { + switch (options.name) { + case 'component': + return new TestContentPart(options.id); + default: + throw new Error(`unsupported`); + } }, }); @@ -545,8 +550,13 @@ describe('dockviewGroupPanelModel', () => { test('toJSON() default', () => { const dockviewComponent = new DockviewComponent({ parentElement: document.createElement('div'), - components: { - component: TestContentPart, + createComponent(options) { + switch (options.name) { + case 'component': + return new TestContentPart(options.id); + default: + throw new Error(`unsupported`); + } }, }); @@ -568,8 +578,13 @@ describe('dockviewGroupPanelModel', () => { test('toJSON() locked and hideHeader', () => { const dockviewComponent = new DockviewComponent({ parentElement: document.createElement('div'), - components: { - component: TestContentPart, + createComponent(options) { + switch (options.name) { + case 'component': + return new TestContentPart(options.id); + default: + throw new Error(`unsupported`); + } }, }); @@ -596,8 +611,13 @@ describe('dockviewGroupPanelModel', () => { test("that openPanel with skipSetActive doesn't set panel to active", () => { const dockviewComponent = new DockviewComponent({ parentElement: document.createElement('div'), - components: { - component: TestContentPart, + createComponent(options) { + switch (options.name) { + case 'component': + return new TestContentPart(options.id); + default: + throw new Error(`unsupported`); + } }, }); @@ -637,19 +657,16 @@ describe('dockviewGroupPanelModel', () => { }); test('that should not show drop target is external event', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, - getPanel: jest.fn(), - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - }; + const accessor = fromPartial({ + id: 'testcomponentid', + options: { + parentElement: document.createElement('div'), + }, + getPanel: jest.fn(), + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), }); - const accessor = new accessorMock() as DockviewComponent; const groupviewMock = jest.fn, []>( () => { return { @@ -704,18 +721,16 @@ describe('dockviewGroupPanelModel', () => { }); test('that the .locked behaviour is as', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, - getPanel: jest.fn(), - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - }; + const accessor = fromPartial({ + id: 'testcomponentid', + options: { + parentElement: document.createElement('div'), + }, + getPanel: jest.fn(), + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), }); - const accessor = new accessorMock() as DockviewComponent; + const groupviewMock = jest.fn, []>( () => { return { @@ -799,22 +814,20 @@ describe('dockviewGroupPanelModel', () => { }); test('that should not show drop target if dropping on self', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, - getPanel: jest.fn(), - doSetGroupActive: jest.fn(), - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - overlayRenderContainer: new OverlayRenderContainer( - document.createElement('div') - ), - }; + const accessor = fromPartial({ + id: 'testcomponentid', + options: { + parentElement: document.createElement('div'), + }, + getPanel: jest.fn(), + doSetGroupActive: jest.fn(), + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + overlayRenderContainer: new OverlayRenderContainer( + document.createElement('div') + ), }); - const accessor = new accessorMock() as DockviewComponent; + const groupviewMock = jest.fn, []>( () => { return { @@ -874,22 +887,20 @@ describe('dockviewGroupPanelModel', () => { }); test('that should not allow drop when dropping on self for same component id', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, - getPanel: jest.fn(), - doSetGroupActive: jest.fn(), - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - overlayRenderContainer: new OverlayRenderContainer( - document.createElement('div') - ), - }; + const accessor = fromPartial({ + id: 'testcomponentid', + options: { + parentElement: document.createElement('div'), + }, + getPanel: jest.fn(), + doSetGroupActive: jest.fn(), + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + overlayRenderContainer: new OverlayRenderContainer( + document.createElement('div') + ), }); - const accessor = new accessorMock() as DockviewComponent; + const groupviewMock = jest.fn, []>( () => { return { @@ -950,22 +961,20 @@ describe('dockviewGroupPanelModel', () => { }); test('that should not allow drop when not dropping for different component id', () => { - const accessorMock = jest.fn, []>(() => { - return { - id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, - getPanel: jest.fn(), - doSetGroupActive: jest.fn(), - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - overlayRenderContainer: new OverlayRenderContainer( - document.createElement('div') - ), - }; + const accessor = fromPartial({ + id: 'testcomponentid', + options: { + parentElement: document.createElement('div'), + }, + getPanel: jest.fn(), + doSetGroupActive: jest.fn(), + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + overlayRenderContainer: new OverlayRenderContainer( + document.createElement('div') + ), }); - const accessor = new accessorMock() as DockviewComponent; + const groupviewMock = jest.fn, []>( () => { return { diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts index b54ddadcc..5bab66039 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts @@ -1,16 +1,13 @@ -import { - DockviewComponent, - IDockviewComponent, -} from '../../dockview/dockviewComponent'; +import { DockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewPanelModel } from '../../dockview/dockviewPanelModel'; import { IContentRenderer, ITabRenderer } from '../../dockview/types'; -import { GroupPanelFrameworkComponentFactory } from '../../dockview/options'; import { DefaultTab } from '../../dockview/components/tab/defaultTab'; +import { fromPartial } from '@total-typescript/shoehorn'; describe('dockviewGroupPanel', () => { let contentMock: jest.Mock; let tabMock: jest.Mock; - let accessorMock: jest.Mock; + let accessorMock: DockviewComponent; beforeEach(() => { contentMock = jest.fn(() => { @@ -18,8 +15,6 @@ describe('dockviewGroupPanel', () => { element: document.createElement('div'), dispose: jest.fn(), update: jest.fn(), - // onGroupChange: jest.fn(), - // onPanelVisibleChange: jest.fn(), }; return partial as IContentRenderer; }); @@ -29,32 +24,36 @@ describe('dockviewGroupPanel', () => { element: document.createElement('div'), dispose: jest.fn(), update: jest.fn(), - // onGroupChange: jest.fn(), - // onPanelVisibleChange: jest.fn(), }; return partial as IContentRenderer; }); - accessorMock = jest.fn(() => { - const partial: Partial = { - options: { - parentElement: document.createElement('div'), - components: { - contentComponent: contentMock, - }, - tabComponents: { - tabComponent: tabMock, - }, + accessorMock = fromPartial({ + options: { + parentElement: document.createElement('div'), + createComponent(options) { + switch (options.name) { + case 'contentComponent': + return new contentMock(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, - }; - - return partial as DockviewComponent; + createTabComponent(options) { + switch (options.name) { + case 'tabComponent': + return new tabMock(options.id, options.name); + default: + throw new Error(`unsupported`); + } + }, + }, }); }); test('that dispose is called on content and tab renderers when present', () => { const cut = new DockviewPanelModel( - new accessorMock(), + accessorMock, 'id', 'contentComponent', 'tabComponent' @@ -68,7 +67,7 @@ describe('dockviewGroupPanel', () => { test('that update is called on content and tab renderers when present', () => { const cut = new DockviewPanelModel( - new accessorMock(), + accessorMock, 'id', 'contentComponent', 'tabComponent' @@ -82,73 +81,31 @@ describe('dockviewGroupPanel', () => { expect(cut.tab.update).toHaveBeenCalled(); }); - // test('that events are fired', () => { - // const cut = new DockviewPanelModel( - // new accessorMock(), - // 'id', - // 'contentComponent', - // 'tabComponent' - // ); - - // const group1 = jest.fn() as any; - // const group2 = jest.fn() as any; - // cut.updateParentGroup(group1, false); - - // expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(1, group1); - // expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(1, group1); - // expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith( - // 1, - // false - // ); - // expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false); - // expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1); - // expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1); - // expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(1); - // expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(1); - - // cut.updateParentGroup(group1, true); - - // expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith( - // 2, - // true - // ); - // expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true); - // expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1); - // expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1); - // expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2); - // expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); - - // cut.updateParentGroup(group2, true); - - // expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(2, group2); - // expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(2, group2); - // expect(cut.content.onGroupChange).toHaveBeenCalledTimes(2); - // expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(2); - // expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2); - // expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2); - // }); - test('that the default tab is created', () => { - accessorMock = jest.fn(() => { - const partial: Partial = { - options: { - parentElement: document.createElement('div'), - components: { - contentComponent: contentMock, - }, - tabComponents: { - tabComponent: jest - .fn() - .mockImplementation(() => tabMock), - }, + accessorMock = fromPartial({ + options: { + parentElement: document.createElement('div'), + createComponent(options) { + switch (options.name) { + case 'contentComponent': + return new contentMock(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, - }; - - return partial as DockviewComponent; + createTabComponent(options) { + switch (options.name) { + case 'tabComponent': + return tabMock; + default: + throw new Error(`unsupported`); + } + }, + }, }); const cut = new DockviewPanelModel( - new accessorMock(), + accessorMock, 'id', 'contentComponent', 'tabComponent' @@ -158,27 +115,31 @@ describe('dockviewGroupPanel', () => { }); test('that the provided default tab is chosen when no implementation is provided', () => { - accessorMock = jest.fn(() => { - const partial: Partial = { - options: { - parentElement: document.createElement('div'), - components: { - contentComponent: contentMock, - }, - tabComponents: { - tabComponent: jest - .fn() - .mockImplementation(() => tabMock), - }, - defaultTabComponent: 'tabComponent', + accessorMock = fromPartial({ + options: { + parentElement: document.createElement('div'), + defaultTabComponent: 'tabComponent', + createComponent(options) { + switch (options.name) { + case 'contentComponent': + return new contentMock(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, - }; - - return partial as DockviewComponent; + createTabComponent(options) { + switch (options.name) { + case 'tabComponent': + return tabMock; + default: + throw new Error(`unsupported`); + } + }, + }, }); const cut = new DockviewPanelModel( - new accessorMock(), + accessorMock, 'id', 'contentComponent' ); @@ -186,58 +147,23 @@ describe('dockviewGroupPanel', () => { expect(cut.tab).toEqual(tabMock); }); - test('that the framework tab is created when provided tab is a framework tab', () => { - const tab = jest.fn(); - const tabFactory = jest.fn().mockImplementation(() => tab); - - accessorMock = jest.fn(() => { - const partial: Partial = { - options: { - parentElement: document.createElement('div'), - components: { - contentComponent: contentMock, - }, - frameworkTabComponents: { - tabComponent: tabMock, - }, - frameworkComponentFactory: (< - Partial - >{ - tab: { createComponent: tabFactory }, - }) as GroupPanelFrameworkComponentFactory, - }, - }; - - return partial as DockviewComponent; - }); - - const cut = new DockviewPanelModel( - new accessorMock(), - 'id', - 'contentComponent', - 'tabComponent' - ); - - expect(tabFactory).toHaveBeenCalledWith('id', 'tabComponent', tabMock); - expect(cut.tab).toEqual(tab); - }); - test('that is library default tab instance is created when no alternative exists', () => { - accessorMock = jest.fn(() => { - const partial: Partial = { - options: { - parentElement: document.createElement('div'), - components: { - contentComponent: contentMock, - }, + accessorMock = fromPartial({ + options: { + parentElement: document.createElement('div'), + createComponent(options) { + switch (options.name) { + case 'contentComponent': + return new contentMock(options.id, options.name); + default: + throw new Error(`unsupported`); + } }, - }; - - return partial as DockviewComponent; + }, }); const cut = new DockviewPanelModel( - new accessorMock(), + accessorMock, 'id', 'contentComponent' ); @@ -246,63 +172,34 @@ describe('dockviewGroupPanel', () => { }); test('that the default content is created', () => { - accessorMock = jest.fn(() => { - const partial: Partial = { - options: { - parentElement: document.createElement('div'), - components: { - contentComponent: jest.fn().mockImplementation(() => { + accessorMock = fromPartial({ + options: { + parentElement: document.createElement('div'), + createComponent(options) { + switch (options.name) { + case 'contentComponent': return contentMock; - }), - }, + default: + throw new Error(`unsupported`); + } }, - }; - - return partial as DockviewComponent; + createTabComponent(options) { + switch (options.name) { + case 'tabComponent': + return tabMock; + default: + throw new Error(`unsupported`); + } + }, + }, }); const cut = new DockviewPanelModel( - new accessorMock(), + accessorMock, 'id', 'contentComponent' ); expect(cut.content).toEqual(contentMock); }); - - test('that the framework content is created', () => { - const content = jest.fn(); - const contentFactory = jest.fn().mockImplementation(() => content); - - accessorMock = jest.fn(() => { - const partial: Partial = { - options: { - parentElement: document.createElement('div'), - frameworkComponents: { - contentComponent: contentMock, - }, - frameworkComponentFactory: (< - Partial - >{ - content: { createComponent: contentFactory }, - }) as GroupPanelFrameworkComponentFactory, - }, - }; - - return partial as DockviewComponent; - }); - - const cut = new DockviewPanelModel( - new accessorMock(), - 'id', - 'contentComponent' - ); - - expect(contentFactory).toHaveBeenCalledWith( - 'id', - 'contentComponent', - contentMock - ); - expect(cut.content).toEqual(content); - }); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index f153ad113..fd9db4688 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -18,7 +18,6 @@ import { Watermark } from './components/watermark/watermark'; import { IWatermarkRenderer, GroupviewPanelState } from './types'; import { sequentialNumberGenerator } from '../math'; import { DefaultDockviewDeserialzier } from './deserializer'; -import { createComponent } from '../panel/componentFactory'; import { AddGroupOptions, AddPanelOptions, @@ -68,7 +67,6 @@ import { OverlayRenderContainer, } from '../overlayRenderContainer'; import { PopoutWindow } from '../popoutWindow'; -import { TitleEvent } from '../api/dockviewPanelApi'; const DEFAULT_ROOT_OVERLAY_MODEL: DroptargetOverlayModel = { activationSize: { type: 'pixels', value: 10 }, @@ -503,25 +501,6 @@ export class DockviewComponent this._options = options; - if (!this.options.components) { - this.options.components = {}; - } - if (!this.options.frameworkComponents) { - this.options.frameworkComponents = {}; - } - if (!this.options.frameworkTabComponents) { - this.options.frameworkTabComponents = {}; - } - if (!this.options.tabComponents) { - this.options.tabComponents = {}; - } - if ( - !this.options.watermarkComponent && - !this.options.watermarkFrameworkComponent - ) { - this.options.watermarkComponent = Watermark; - } - this._rootDropTarget = new Droptarget(this.element, { canDisplayOverlay: (event, position) => { const data = getPanelData(); @@ -1606,17 +1585,10 @@ export class DockviewComponent } createWatermarkComponent(): IWatermarkRenderer { - return createComponent( - 'watermark-id', - 'watermark-name', - this.options.watermarkComponent - ? { 'watermark-name': this.options.watermarkComponent } - : {}, - this.options.watermarkFrameworkComponent - ? { 'watermark-name': this.options.watermarkFrameworkComponent } - : {}, - this.options.frameworkComponentFactory?.watermark - ); + if (this.options.createWatermarkComponent) { + return this.options.createWatermarkComponent(); + } + return new Watermark(); } private updateWatermark(): void { diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index b98994e4f..10d09ad5f 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -546,9 +546,9 @@ export class DockviewGroupPanelModel this.setActive(this.isActive, true); this.updateContainer(); - if (this.accessor.options.headerRightActionComponent) { + if (this.accessor.options.createRightHeaderActionComponent) { this._rightHeaderActions = - this.accessor.options.headerRightActionComponent( + this.accessor.options.createRightHeaderActionComponent( this.groupPanel ); this.addDisposables(this._rightHeaderActions); @@ -562,9 +562,9 @@ export class DockviewGroupPanelModel ); } - if (this.accessor.options.headerLeftActionComponent) { + if (this.accessor.options.createLeftHeaderActionComponent) { this._leftHeaderActions = - this.accessor.options.headerLeftActionComponent( + this.accessor.options.createLeftHeaderActionComponent( this.groupPanel ); this.addDisposables(this._leftHeaderActions); @@ -578,9 +578,9 @@ export class DockviewGroupPanelModel ); } - if (this.accessor.options.headerPrefixActionComponent) { + if (this.accessor.options.createPrefixHeaderActionComponent) { this._prefixHeaderActions = - this.accessor.options.headerPrefixActionComponent( + this.accessor.options.createPrefixHeaderActionComponent( this.groupPanel ); this.addDisposables(this._prefixHeaderActions); diff --git a/packages/dockview-core/src/dockview/dockviewPanelModel.ts b/packages/dockview-core/src/dockview/dockviewPanelModel.ts index 9bf87a58d..fb5528c10 100644 --- a/packages/dockview-core/src/dockview/dockviewPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanelModel.ts @@ -6,7 +6,6 @@ import { } from './types'; import { DockviewGroupPanel } from './dockviewGroupPanel'; import { IDisposable } from '../lifecycle'; -import { createComponent } from '../panel/componentFactory'; import { IDockviewComponent } from './dockviewComponent'; import { PanelUpdateEvent } from '../panel/types'; @@ -73,39 +72,37 @@ export class DockviewPanelModel implements IDockviewPanelModel { id: string, componentName: string ): IContentRenderer { - return createComponent( + return this.accessor.options.createComponent({ id, - componentName, - this.accessor.options.components ?? {}, - this.accessor.options.frameworkComponents, - this.accessor.options.frameworkComponentFactory?.content - ); + name: componentName, + }); } private createTabComponent( id: string, componentName?: string ): ITabRenderer { - if (componentName) { - return createComponent( - id, - componentName, - this.accessor.options.tabComponents, - this.accessor.options.frameworkTabComponents, - this.accessor.options.frameworkComponentFactory?.tab, - () => new DefaultTab() + const name = componentName ?? this.accessor.options.defaultTabComponent; + + if (name) { + if (this.accessor.options.createTabComponent) { + const component = this.accessor.options.createTabComponent({ + id, + name, + }); + + if (component) { + return component; + } else { + return new DefaultTab(); + } + } + + console.warn( + `dockview: tabComponent '${componentName}' was not found. falling back to the default tab.` ); - } else if (this.accessor.options.defaultTabComponent) { - return createComponent( - id, - this.accessor.options.defaultTabComponent, - this.accessor.options.tabComponents, - this.accessor.options.frameworkTabComponents, - this.accessor.options.frameworkComponentFactory?.tab, - () => new DefaultTab() - ); - } else { - return new DefaultTab(); } + + return new DefaultTab(); } } diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index c1af7b482..5b1c7080a 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -1,12 +1,7 @@ import { DockviewApi } from '../api/component.api'; import { Direction } from '../gridview/baseComponentGridview'; import { IGridView } from '../gridview/gridview'; -import { - IContentRenderer, - ITabRenderer, - WatermarkConstructor, - IWatermarkRenderer, -} from './types'; +import { IContentRenderer, ITabRenderer, IWatermarkRenderer } from './types'; import { Parameters } from '../panel/types'; import { DockviewGroupPanel } from './dockviewGroupPanel'; import { PanelTransfer } from '../dnd/dataTransfer'; @@ -17,10 +12,6 @@ import { GroupOptions, } from './dockviewGroupPanelModel'; import { IDockviewPanel } from './dockviewPanel'; -import { - ComponentConstructor, - FrameworkFactory, -} from '../panel/componentFactory'; import { DockviewPanelRenderer } from '../overlayRenderContainer'; import { IGroupHeaderProps } from './framework'; @@ -29,12 +20,6 @@ export interface IHeaderActionsRenderer extends IDisposable { init(params: IGroupHeaderProps): void; } -export interface GroupPanelFrameworkComponentFactory { - content: FrameworkFactory; - tab: FrameworkFactory; - watermark: FrameworkFactory; -} - export interface TabContextMenuEvent { event: MouseEvent; api: DockviewApi; @@ -119,32 +104,26 @@ export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => { })(); export interface DockviewFrameworkOptions { - headerRightActionComponent?: ( - group: DockviewGroupPanel - ) => IHeaderActionsRenderer; - headerLeftActionComponent?: ( - group: DockviewGroupPanel - ) => IHeaderActionsRenderer; - headerPrefixActionComponent?: ( - group: DockviewGroupPanel - ) => IHeaderActionsRenderer; - tabComponents?: { - [componentName: string]: ComponentConstructor; - }; - components?: { - [componentName: string]: ComponentConstructor; - }; - frameworkTabComponents?: { - [componentName: string]: any; - }; - frameworkComponents?: { - [componentName: string]: any; - }; parentElement: HTMLElement; defaultTabComponent?: string; - watermarkComponent?: WatermarkConstructor; - watermarkFrameworkComponent?: any; - frameworkComponentFactory?: GroupPanelFrameworkComponentFactory; + createRightHeaderActionComponent?: ( + group: DockviewGroupPanel + ) => IHeaderActionsRenderer; + createLeftHeaderActionComponent?: ( + group: DockviewGroupPanel + ) => IHeaderActionsRenderer; + createPrefixHeaderActionComponent?: ( + group: DockviewGroupPanel + ) => IHeaderActionsRenderer; + createTabComponent?: (options: { + id: string; + name: string; + }) => ITabRenderer | undefined; + createComponent: (options: { + id: string; + name: string; + }) => IContentRenderer; + createWatermarkComponent?: () => IWatermarkRenderer; } export type DockviewComponentOptions = DockviewOptions & diff --git a/packages/dockview-vue/package.json b/packages/dockview-vue/package.json index c5b0cefc1..0617f542a 100644 --- a/packages/dockview-vue/package.json +++ b/packages/dockview-vue/package.json @@ -42,7 +42,7 @@ ], "scripts": { "build-only": "vite build", - "build": "npm run build:package && npm run build:bundles", + "build": "npm run build:package", "build:bundles": "rollup -c", "build:cjs": "cross-env ../../node_modules/.bin/vue-tsc --build ./tsconfig.json --verbose --extendedDiagnostics", "build:css": "gulp sass", @@ -58,4 +58,4 @@ "dependencies": { "dockview-core": "^1.10.1" } -} +} \ No newline at end of file diff --git a/packages/dockview-vue/src/dockview/dockview.vue b/packages/dockview-vue/src/dockview/dockview.vue index eb1d2c098..38a05ec75 100644 --- a/packages/dockview-vue/src/dockview/dockview.vue +++ b/packages/dockview-vue/src/dockview/dockview.vue @@ -30,23 +30,19 @@ import { VueHeaderActionsRenderer, VueTabRenderer, VueWatermarkRenderer, - type VueComponent, + findComponent, } from '../utils'; interface VueProps { - components: Record>; - tabComponents?: Record>; - watermarkComponent?: VueComponent; - defaultTabComponent?: VueComponent; - rightHeaderActionsComponent?: VueComponent; - leftHeaderActionsComponent?: VueComponent; - prefixHeaderActionsComponent?: VueComponent; + watermarkComponent?: string; + defaultTabComponent?: string; + rightHeaderActionsComponent?: string; + leftHeaderActionsComponent?: string; + prefixHeaderActionsComponent?: string; } const VUE_PROPERTIES = (() => { const _value: Record = { - components: undefined, - tabComponents: undefined, watermarkComponent: undefined, defaultTabComponent: undefined, rightHeaderActionsComponent: undefined, @@ -61,8 +57,6 @@ type VueEvents = { ready: [event: DockviewReadyEvent]; }; -const DEFAULT_REACT_TAB = 'props.defaultTabComponent'; - export type IDockviewVueProps = DockviewOptions & VueProps; function extractCoreOptions(props: IDockviewVueProps): DockviewOptions { @@ -79,7 +73,6 @@ function extractCoreOptions(props: IDockviewVueProps): DockviewOptions { const emit = defineEmits(); - /** * Anything here that is a Vue.js component should not be reactive * i.e. markRaw(toRaw(...)) @@ -89,7 +82,6 @@ const props = defineProps(); const el = ref(null); const instance = ref(null); - PROPERTY_KEYS.forEach((coreOptionKey) => { watch( () => props[coreOptionKey], @@ -101,180 +93,87 @@ PROPERTY_KEYS.forEach((coreOptionKey) => { ); }); -watch( - () => props.components, - (newValue, oldValue) => { - if (instance.value) { - instance.value.updateOptions({ frameworkComponents: newValue }); - } - } -); - -watch( - () => [props.tabComponents, props.defaultTabComponent], - ([newTabComponents, newDefaultTabComponent], oldValue) => { - if (instance.value) { - const frameworkTabComponents = newTabComponents ?? {}; - - if (newDefaultTabComponent) { - frameworkTabComponents[DEFAULT_REACT_TAB] = - newDefaultTabComponent; - } - - instance.value.updateOptions({ - defaultTabComponent: newDefaultTabComponent - ? DEFAULT_REACT_TAB - : undefined, - frameworkTabComponents, - }); - } - } -); - -watch( - () => props.watermarkComponent, - (newValue, oldValue) => { - if (instance.value) { - instance.value.updateOptions({ - watermarkFrameworkComponent: newValue, - }); - } - } -); - -watch( - () => props.leftHeaderActionsComponent, - (newValue, oldValue) => { - if (instance.value) { - instance.value.updateOptions({ - headerLeftActionComponent: newValue - ? (group) => { - return new VueHeaderActionsRenderer( - newValue as VueComponent, - getCurrentInstance()!, - group - ); - } - : undefined, - }); - } - } -); - -watch( - () => props.rightHeaderActionsComponent, - (newValue, oldValue) => { - if (instance.value) { - instance.value.updateOptions({ - headerRightActionComponent: newValue - ? (group) => { - return new VueHeaderActionsRenderer( - newValue as VueComponent, - getCurrentInstance()!, - group - ); - } - : undefined, - }); - } - } -); - -watch( - () => props.prefixHeaderActionsComponent, - (newValue, oldValue) => { - if (instance.value) { - instance.value.updateOptions({ - headerPrefixActionComponent: newValue - ? (group) => { - return new VueHeaderActionsRenderer( - newValue as VueComponent,getCurrentInstance()!, - group - ); - } - : undefined, - }); - } - } -); - onMounted(() => { if (!el.value) { throw new Error('element is not mounted'); } - const frameworkTabComponents = props.tabComponents ?? {}; - - if (props.defaultTabComponent) { - frameworkTabComponents[DEFAULT_REACT_TAB] = props.defaultTabComponent; - } - const frameworkOptions: DockviewFrameworkOptions = { parentElement: el.value, - frameworkComponentFactory: { - content: { - createComponent: ( - id: string, - componentId: string, - component: any - ): IContentRenderer => { - return new VueContentRenderer(component,getCurrentInstance()!); - }, - }, - tab: { - createComponent: ( - id: string, - componentId: string, - component: any - ): ITabRenderer => { - return new VueTabRenderer(component,getCurrentInstance()!); - }, - }, - watermark: { - createComponent: ( - id: string, - componentId: string, - component: any - ): IWatermarkRenderer => { - return new VueWatermarkRenderer(component,getCurrentInstance()!); - }, - }, - // action: { - // createComponent: (id: string, componentId: string, component: any): IWatermarkRenderer => { - // return new VueHeaderActionRenderer(component) - // } - // } + createComponent(options) { + const component = findComponent( + getCurrentInstance()!, + options.name + ); + return new VueContentRenderer(component!, getCurrentInstance()!); }, - frameworkComponents: props.components, - frameworkTabComponents, - headerLeftActionComponent: props.leftHeaderActionsComponent + createTabComponent(options) { + let component = findComponent(getCurrentInstance()!, options.name); + + if (!component && props.defaultTabComponent) { + component = findComponent( + getCurrentInstance()!, + props.defaultTabComponent + ); + } + + if (component) { + return new VueTabRenderer(component, getCurrentInstance()!); + } + return undefined; + }, + createWatermarkComponent: props.watermarkComponent + ? () => { + const component = findComponent( + getCurrentInstance()!, + props.watermarkComponent! + ); + + return new VueWatermarkRenderer( + component!, + getCurrentInstance()! + ); + } + : undefined, + createLeftHeaderActionComponent: props.leftHeaderActionsComponent ? (group) => { + const component = findComponent( + getCurrentInstance()!, + props.leftHeaderActionsComponent! + ); return new VueHeaderActionsRenderer( - props.leftHeaderActionsComponent as VueComponent,getCurrentInstance()!, + component!, + getCurrentInstance()!, group ); } : undefined, - headerPrefixActionComponent: props.prefixHeaderActionsComponent + createPrefixHeaderActionComponent: props.prefixHeaderActionsComponent ? (group) => { + const component = findComponent( + getCurrentInstance()!, + props.prefixHeaderActionsComponent! + ); return new VueHeaderActionsRenderer( - props.prefixHeaderActionsComponent as VueComponent,getCurrentInstance()!, + component!, + getCurrentInstance()!, group ); } : undefined, - headerRightActionComponent: props.rightHeaderActionsComponent + createRightHeaderActionComponent: props.rightHeaderActionsComponent ? (group) => { + const component = findComponent( + getCurrentInstance()!, + props.rightHeaderActionsComponent! + ); return new VueHeaderActionsRenderer( - props.rightHeaderActionsComponent as VueComponent,getCurrentInstance()!, + component!, + getCurrentInstance()!, group ); } : undefined, - defaultTabComponent: props.defaultTabComponent - ? DEFAULT_REACT_TAB - : undefined, - watermarkFrameworkComponent:props.watermarkComponent }; const dockview = new DockviewComponent({ @@ -300,6 +199,7 @@ onMounted(() => { */ instance.value = markRaw(dockview); + console.log(getCurrentInstance()); emit('ready', { api: new DockviewApi(dockview) }); }); diff --git a/packages/dockview-vue/src/utils.ts b/packages/dockview-vue/src/utils.ts index 978370038..3125cf892 100644 --- a/packages/dockview-vue/src/utils.ts +++ b/packages/dockview-vue/src/utils.ts @@ -2,9 +2,12 @@ import type { DockviewGroupPanel, GroupPanelPartInitParameters, IContentRenderer, + IDockviewPanelHeaderProps, + IDockviewPanelProps, IGroupHeaderProps, IHeaderActionsRenderer, ITabRenderer, + IWatermarkPanelProps, IWatermarkRenderer, PanelUpdateEvent, Parameters, @@ -15,7 +18,6 @@ import { type ComponentOptionsBase, render, cloneVNode, - mergeProps, type DefineComponent, type ComponentInternalInstance, } from 'vue'; @@ -33,6 +35,29 @@ export type ComponentInterface = ComponentOptionsBase< export type VueComponent = DefineComponent; +export function findComponent( + parent: ComponentInternalInstance, + name: string +): VueComponent | null { + let instance = parent as any; + let component = null; + + while (!component && instance) { + component = instance.components?.[name]; + instance = instance.parent; + } + + if (!component) { + component = parent.appContext.components?.[name]; + } + + if (!component) { + throw new Error(`Failed to find Vue Component '${name}'`); + } + + return component; +} + /** * TODO List * @@ -90,7 +115,7 @@ export class VueContentRenderer implements IContentRenderer { } init(parameters: GroupPanelPartInitParameters): void { - const props = { + const props: IDockviewPanelProps = { params: parameters.params, api: parameters.api, containerApi: parameters.containerApi, @@ -100,7 +125,7 @@ export class VueContentRenderer implements IContentRenderer { this._renderDisposable = mountVueComponent( this.component, this.parent, - props, + { params: props }, this.element ); } @@ -141,7 +166,7 @@ export class VueTabRenderer implements ITabRenderer { } init(parameters: GroupPanelPartInitParameters): void { - const props = { + const props: IDockviewPanelHeaderProps = { params: parameters.params, api: parameters.api, containerApi: parameters.containerApi, @@ -151,7 +176,7 @@ export class VueTabRenderer implements ITabRenderer { this._renderDisposable = mountVueComponent( this.component, this.parent, - props, + { params: props }, this.element ); } @@ -188,7 +213,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer { } init(parameters: WatermarkRendererInitParameters): void { - const props = { + const props: IWatermarkPanelProps = { group: parameters.group, containerApi: parameters.containerApi, }; @@ -197,7 +222,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer { this._renderDisposable = mountVueComponent( this.component, this.parent, - props, + { params: props }, this.element ); } @@ -238,13 +263,12 @@ export class VueHeaderActionsRenderer implements IHeaderActionsRenderer { this._element.style.height = '100%'; } - init(params: IGroupHeaderProps): void { - console.log(params); + init(props: IGroupHeaderProps): void { this._renderDisposable?.dispose(); this._renderDisposable = mountVueComponent( this.component, this.parent, - { ...params }, + { params: props }, this.element ); } diff --git a/packages/dockview-vue/vite.config.ts b/packages/dockview-vue/vite.config.ts index 4be0b92a9..074ed3fbb 100644 --- a/packages/dockview-vue/vite.config.ts +++ b/packages/dockview-vue/vite.config.ts @@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], build: { + minify: false, lib: { // src/indext.ts is where we have exported the component(s) entry: resolve(__dirname, 'src/index.ts'), diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index 039fe610a..3f4102ce5 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { DockviewComponent, DockviewWillDropEvent, - GroupPanelFrameworkComponentFactory, DockviewApi, IContentRenderer, ITabRenderer, @@ -70,7 +69,9 @@ export interface IDockviewReactProps extends DockviewOptions { function extractCoreOptions(props: IDockviewReactProps): DockviewOptions { const coreOptions = (PROPERTY_KEYS as (keyof DockviewOptions)[]).reduce( (obj, key) => { - obj[key] = props[key] as any; + if (key in props) { + obj[key] = props[key] as any; + } return obj; }, {} as Partial @@ -79,46 +80,6 @@ function extractCoreOptions(props: IDockviewReactProps): DockviewOptions { return coreOptions as DockviewOptions; } -function createFrameworkFactory( - addPortal: (portal: React.ReactPortal) => IDockviewDisposable -): GroupPanelFrameworkComponentFactory { - return { - content: { - createComponent: ( - _id: string, - componentId: string, - component: React.FunctionComponent - ): IContentRenderer => { - return new ReactPanelContentPart(componentId, component, { - addPortal, - }); - }, - }, - tab: { - createComponent: ( - _id: string, - componentId: string, - component: React.FunctionComponent - ): ITabRenderer => { - return new ReactPanelHeaderPart(componentId, component, { - addPortal, - }); - }, - }, - watermark: { - createComponent: ( - _id: string, - componentId: string, - component: React.FunctionComponent<{}> - ) => { - return new ReactWatermarkPart(componentId, component, { - addPortal, - }); - }, - }, - }; -} - export const DockviewReact = React.forwardRef( (props: IDockviewReactProps, ref: React.ForwardedRef) => { const domRef = React.useRef(null); @@ -137,7 +98,7 @@ export const DockviewReact = React.forwardRef( const key = propKey as keyof DockviewOptions; const propValue = props[key]; - if (propValue !== prevProps.current[key]) { + if (key in props && propValue !== prevProps.current[key]) { changes[key] = propValue as any; } }); @@ -166,26 +127,51 @@ export const DockviewReact = React.forwardRef( } const frameworkOptions: DockviewFrameworkOptions = { - headerLeftActionComponent: createGroupControlElement( + createLeftHeaderActionComponent: createGroupControlElement( props.leftHeaderActionsComponent, { addPortal } ), - headerRightActionComponent: createGroupControlElement( + createRightHeaderActionComponent: createGroupControlElement( props.rightHeaderActionsComponent, { addPortal } ), - headerPrefixActionComponent: createGroupControlElement( + createPrefixHeaderActionComponent: createGroupControlElement( props.prefixHeaderActionsComponent, { addPortal } ), - frameworkTabComponents, - frameworkComponents: props.components, - frameworkComponentFactory: createFrameworkFactory(addPortal), + createComponent: (options) => { + return new ReactPanelContentPart( + options.id, + props.components[options.name], + { + addPortal, + } + ); + }, + createTabComponent(options) { + return new ReactPanelHeaderPart( + options.id, + frameworkTabComponents[options.name], + { + addPortal, + } + ); + }, + createWatermarkComponent: props.watermarkComponent + ? () => { + return new ReactWatermarkPart( + 'watermark', + props.watermarkComponent!, + { + addPortal, + } + ); + } + : undefined, parentElement: domRef.current, defaultTabComponent: props.defaultTabComponent ? DEFAULT_REACT_TAB : undefined, - watermarkFrameworkComponent: props.watermarkComponent, }; const dockview = new DockviewComponent({ @@ -267,20 +253,20 @@ export const DockviewReact = React.forwardRef( if (!dockviewRef.current) { return; } + dockviewRef.current.updateOptions({ - frameworkComponents: props.components, + createComponent: (options) => { + return new ReactPanelContentPart( + options.id, + props.components[options.name], + { + addPortal, + } + ); + }, }); }, [props.components]); - React.useEffect(() => { - if (!dockviewRef.current) { - return; - } - dockviewRef.current.updateOptions({ - watermarkFrameworkComponent: props.watermarkComponent, - }); - }, [props.watermarkComponent]); - React.useEffect(() => { if (!dockviewRef.current) { return; @@ -297,7 +283,15 @@ export const DockviewReact = React.forwardRef( defaultTabComponent: props.defaultTabComponent ? DEFAULT_REACT_TAB : undefined, - frameworkTabComponents, + createTabComponent(options) { + return new ReactPanelHeaderPart( + options.id, + frameworkTabComponents[options.name], + { + addPortal, + } + ); + }, }); }, [props.tabComponents, props.defaultTabComponent]); @@ -305,8 +299,28 @@ export const DockviewReact = React.forwardRef( if (!dockviewRef.current) { return; } + dockviewRef.current.updateOptions({ - headerRightActionComponent: createGroupControlElement( + createWatermarkComponent: props.watermarkComponent + ? () => { + return new ReactWatermarkPart( + 'watermark', + props.watermarkComponent!, + { + addPortal, + } + ); + } + : undefined, + }); + }, [props.watermarkComponent]); + + React.useEffect(() => { + if (!dockviewRef.current) { + return; + } + dockviewRef.current.updateOptions({ + createRightHeaderActionComponent: createGroupControlElement( props.rightHeaderActionsComponent, { addPortal } ), @@ -318,7 +332,7 @@ export const DockviewReact = React.forwardRef( return; } dockviewRef.current.updateOptions({ - headerLeftActionComponent: createGroupControlElement( + createLeftHeaderActionComponent: createGroupControlElement( props.leftHeaderActionsComponent, { addPortal } ), @@ -330,7 +344,7 @@ export const DockviewReact = React.forwardRef( return; } dockviewRef.current.updateOptions({ - headerRightActionComponent: createGroupControlElement( + createPrefixHeaderActionComponent: createGroupControlElement( props.prefixHeaderActionsComponent, { addPortal } ), diff --git a/packages/docs/blog/2024-04-19-dockview-1.13.0.md b/packages/docs/blog/2024-04-27-dockview-1.13.0.md similarity index 64% rename from packages/docs/blog/2024-04-19-dockview-1.13.0.md rename to packages/docs/blog/2024-04-27-dockview-1.13.0.md index ebb51619e..bf0df8f06 100644 --- a/packages/docs/blog/2024-04-19-dockview-1.13.0.md +++ b/packages/docs/blog/2024-04-27-dockview-1.13.0.md @@ -12,8 +12,12 @@ Please reference docs @ [dockview.dev](https://dockview.dev). - Add `onDidActivePanelChange` event to group api [#541](https://github.com/mathuo/dockview/pull/541) +- Add `inactive` property to `addPanel` method to add panels without making them active [#572](https://github.com/mathuo/dockview/issues/572) + ## 🛠 Miscs +- Bug: width and height set incorrectly on floating groups when resized [#580](https://github.com/mathuo/dockview/issues/580) + - Create framework packages in preperation for multiple framework support [#541](https://github.com/mathuo/dockview/pull/541) These are still in active development and will be offically support soon. @@ -36,6 +40,9 @@ Please reference docs @ [dockview.dev](https://dockview.dev). ## 🔥 Breaking changes - [dockview-core] Replace DockviewComponent `canDisplayOverlay` option with `onUnhandledDragOverEvent` event [#541](https://github.com/mathuo/dockview/pull/541) -- [dockview-core] Rename `createRightHeaderActionsElement` to `headerRightActionComponent` [#541](https://github.com/mathuo/dockview/pull/541) -- [dockview-core] Rename `createLeftHeaderActionsElement` to `headerLeftActionComponent` [#541](https://github.com/mathuo/dockview/pull/541) -- [dockview-core] Rename `createPrefixHeaderActionsElement` to `headerPrefixActionComponent` [#541](https://github.com/mathuo/dockview/pull/541) +- [dockview-core] Rename `createRightHeaderActionsElement` to `createRightHeaderActionElement` [#576](https://github.com/mathuo/dockview/pull/576) +- [dockview-core] Rename `createLeftHeaderActionsElement` to `createLeftHeaderActionElement` [#576](https://github.com/mathuo/dockview/pull/576) +- [dockview-core] Rename `createPrefixHeaderActionsElement` to `createPrefixHeaderActionElement` [#576](https://github.com/mathuo/dockview/pull/576) +- [dockview-core] Remove `frameworkTabComponents` and `tabComponents`, replaced by `createTabComponent` [#576](https://github.com/mathuo/dockview/pull/576) +- [dockview-core] Remove `frameworkComponents` and `components`, replaced by `createComponent` [#576](https://github.com/mathuo/dockview/pull/576) +- [dockview-core] Remove `watermarkFrameworkComponent` and `watermarkComponent`, replaced by `createWatermarkComponent` [#576](https://github.com/mathuo/dockview/pull/576) diff --git a/packages/docs/docs/core/locked.mdx b/packages/docs/docs/core/locked.mdx index 65d170d64..0944b6ced 100644 --- a/packages/docs/docs/core/locked.mdx +++ b/packages/docs/docs/core/locked.mdx @@ -12,4 +12,6 @@ This section describes how to lock the dock to prevent movement. You may want to combine this with `disableDnd={true}` to provide a locked grid with no dnd funtionality. See [Disable Dnd](/docs/core/dnd/disable) for more. ::: +Locking the component prevent the resizing of components using the drag handles between panels. + diff --git a/packages/docs/docs/overview/getStarted/installation.mdx b/packages/docs/docs/overview/getStarted/installation.mdx index bd410fc0b..4503011d6 100644 --- a/packages/docs/docs/overview/getStarted/installation.mdx +++ b/packages/docs/docs/overview/getStarted/installation.mdx @@ -22,3 +22,12 @@ npm install dockview ``` + + +Firstly, install the `dockview-vue` library: + +```sh +npm install dockview-vue +``` + + diff --git a/packages/docs/package.json b/packages/docs/package.json index 019224729..4c95df748 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -10,8 +10,8 @@ "swizzle": "docusaurus swizzle @docusaurus/theme-classic", "docs:version": "docusaurus docs:version", "typecheck": "tsc", - "create-templates": "node scripts/buildTemplates.mjs", - "create-templates:local": "node scripts/buildTemplates.mjs --local" + "build-templates": "node scripts/buildTemplates.mjs", + "build-templates:local": "node scripts/buildTemplates.mjs --local" }, "browserslist": { "production": [ @@ -50,4 +50,4 @@ "@types/uuid": "^9.0.7", "docusaurus-plugin-sass": "^0.2.5" } -} +} \ No newline at end of file diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx index 4db4c8aeb..c657af112 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx @@ -188,16 +188,20 @@ const DockviewDemo = (props: { theme?: string }) => { >
- - + {api && ( + + )} + {api && ( + + )}
{ let counter = 0; - return () => { - counter++; - }; + return () => counter++; })(); export function defaultConfig(api: DockviewApi) { diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx index 667e789ee..11466bc12 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx @@ -34,11 +34,12 @@ export const GridActions = (props: { api?: DockviewApi }) => { } }; - const onAddPanel = () => { + const onAddPanel = (options?: { inactive: boolean }) => { props.api?.addPanel({ id: `id_${Date.now().toString()}`, component: 'default', title: `Tab ${nextId()}`, + inactive: options?.inactive, }); }; @@ -48,9 +49,15 @@ export const GridActions = (props: { api?: DockviewApi }) => { return (
- + diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx index ded3f3637..2741a8e11 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx @@ -1,85 +1,136 @@ -import { DockviewApi } from 'dockview'; +import { DockviewApi, DockviewGroupLocation } from 'dockview'; +import * as React from 'react'; + +const GroupAction = (props: { + groupId: string; + groups: string[]; + api: DockviewApi; + activeGroup?: string; +}) => { + const onClick = () => { + props.api?.getGroup(props.groupId)?.focus(); + }; + + const isActive = props.activeGroup === props.groupId; + const group = React.useMemo( + () => props.api.getGroup(props.groupId), + [props.api, props.groupId] + ); + + const [location, setLocation] = + React.useState(null); + const [isMaximized, setIsMaximized] = React.useState(false); + + React.useEffect(() => { + if (!group) { + setLocation(null); + return; + } + + const disposable = group.api.onDidLocationChange((event) => { + setLocation(event.location); + }); + + const disposable2 = props.api.onDidMaximizedGroupChange(() => { + setIsMaximized(group.api.isMaximized()); + }); + + setLocation(group.api.location); + setIsMaximized(group.api.isMaximized()); + + return () => { + disposable.dispose(); + disposable2.dispose(); + }; + }, [group]); + + return ( +
+
+ +
+
+ + + + +
+
+ ); +}; export const GroupActions = (props: { groups: string[]; - api?: DockviewApi; + api: DockviewApi; activeGroup?: string; }) => { return (
- {props.groups.map((x) => { - const onClick = () => { - props.api?.getGroup(x)?.focus(); - }; + {props.groups.map((groupId) => { return ( -
-
- -
-
- - - - -
-
+ ); })}
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx index 5c378b637..d48bbadde 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx @@ -1,71 +1,76 @@ import { DockviewApi } from 'dockview'; +const PanelAction = (props: { + panels: string[]; + api: DockviewApi; + activePanel?: string; + panelId: string; +}) => { + const onClick = () => { + props.api?.getPanel(props.panelId)?.focus(); + }; + return ( +
+
+ +
+
+ + + +
+
+ ); +}; + export const PanelActions = (props: { panels: string[]; - api?: DockviewApi; + api: DockviewApi; activePanel?: string; }) => { return (
- {props.panels.map((x) => { - const onClick = () => { - props.api?.getPanel(x)?.focus(); - }; - return ( -
-
- -
-
- - - -
-
- ); + {props.panels.map((id) => { + return ; })}
); diff --git a/packages/docs/scripts/buildTemplates.mjs b/packages/docs/scripts/buildTemplates.mjs index 2cda726fb..f7aaa08e9 100644 --- a/packages/docs/scripts/buildTemplates.mjs +++ b/packages/docs/scripts/buildTemplates.mjs @@ -6,9 +6,15 @@ import { fileURLToPath } from 'url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const { version } = JSON.parse( + fs.readFileSync( + path.join(__dirname, '..', '..', 'dockview', 'package.json') + ) +); + const REACT_VERSION = '18.2.0'; const VUE_VERSION = '3.4.21'; -const DOCKVIEW_VERSION = '1.11.0'; +const DOCKVIEW_VERSION = version; const USE_LOCAL_CDN = argv.slice(2).includes('--local'); const local = 'http://localhost:1111'; @@ -107,7 +113,7 @@ for (const component of COMPONENTS) { path.join(output, component, folder, framework, 'src') ); const template = createIndexHTML({ - title: 'React App', + title: `Dockview | ${folder} ${framework}`, app: framework === 'react' ? './src/index.tsx' diff --git a/packages/docs/scripts/template.html b/packages/docs/scripts/template.html index 5ae9ab10f..56a5a9ebe 100644 --- a/packages/docs/scripts/template.html +++ b/packages/docs/scripts/template.html @@ -1,120 +1,95 @@ + + {{title}} + + + + + + + + + - - - + - const link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = uri; - document.head.appendChild(link); - console.log('add link') - - // const styles = (await import(uri)).default; - - // const el = document.createElement('style'); - // el.type = 'text/css'; - - // el.innerHTML = Array.from(styles.cssRules) - // .map((x) => x.cssText) - // .join(' '); - - // document.head.appendChild(el); - } - - // System.resolve = function (id, parentUrl) { - // console.log(id, parentUrl); - // return id; - // return '' - // } - - System.onload = function (err, id, deps, isErrSource) { - console.log(id); - if (id.endsWith('.css') && !err) { - importCSSStyleSheet(id); - - // const module = System.get(id); - // console.log(module); - // const styles = module?.default; - // if (styles) { - // // importCSSStyleSheet(styles); - // document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles]; - // } - } - }; - - - - - -
- -
- - - - + +
+ +
+ + + diff --git a/packages/docs/src/components/frameworkSpecific.tsx b/packages/docs/src/components/frameworkSpecific.tsx index cd4cc3d2b..d29a8f65d 100644 --- a/packages/docs/src/components/frameworkSpecific.tsx +++ b/packages/docs/src/components/frameworkSpecific.tsx @@ -4,9 +4,10 @@ import * as React from 'react'; import { IS_PROD } from '../flags'; const frameworks = [ - { value: 'JavaScript', label: 'JavaScript' }, + // { value: 'JavaScript', label: 'JavaScript' }, { value: 'React', label: 'React' }, - { value: 'Angular', label: 'Angular' }, + { value: 'Vue', label: 'Vue' }, + // { value: 'Angular', label: 'Angular' }, ]; const activeFrameworkGlobal = new DockviewEmitter({ replay: true }); @@ -36,7 +37,7 @@ export function useActiveFramework(): [string, (value: string) => void] { activeFrameworkGlobal.fire(value); }, []); - return [IS_PROD ? frameworks[1].value : value, setter]; + return [IS_PROD ? frameworks[0].value : value, setter]; } const FrameworkSelector1 = () => { diff --git a/packages/docs/src/components/ui/codeRunner.tsx b/packages/docs/src/components/ui/codeRunner.tsx index 8b930b2cc..0b9626b0d 100644 --- a/packages/docs/src/components/ui/codeRunner.tsx +++ b/packages/docs/src/components/ui/codeRunner.tsx @@ -22,6 +22,13 @@ export const _CodeRunner = (props: { />
); diff --git a/packages/docs/src/flags.ts b/packages/docs/src/flags.ts index e666855fe..59c122338 100644 --- a/packages/docs/src/flags.ts +++ b/packages/docs/src/flags.ts @@ -1 +1 @@ -export const IS_PROD = true; +export const IS_PROD = false; diff --git a/packages/docs/templates/dockview/basic/vue/src/index.ts b/packages/docs/templates/dockview/basic/vue/src/index.ts index 6bf8927b0..d0d895d03 100644 --- a/packages/docs/templates/dockview/basic/vue/src/index.ts +++ b/packages/docs/templates/dockview/basic/vue/src/index.ts @@ -6,22 +6,14 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core'; const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, setup(props) { return { - title: props.api.title, + title: props.params.api.title, }; }, template: ` @@ -34,14 +26,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - panel: Panel, - }, - }; + panel: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -57,7 +42,6 @@ const App = defineComponent({ style="width:100%; height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" > `, }); diff --git a/packages/docs/templates/dockview/custom-header/vue/src/index.ts b/packages/docs/templates/dockview/custom-header/vue/src/index.ts index 141fea3ea..c36144f5b 100644 --- a/packages/docs/templates/dockview/custom-header/vue/src/index.ts +++ b/packages/docs/templates/dockview/custom-header/vue/src/index.ts @@ -10,16 +10,8 @@ import { const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -43,9 +35,9 @@ const Panel = defineComponent({ console.log('interval'); const interval = setInterval(() => { - this.api.updateParameters({ myValue: Date.now() }); + this.params.api.updateParameters({ myValue: Date.now() }); }, 1000); - this.api.updateParameters({ myValue: Date.now() }); + this.parmas.api.updateParameters({ myValue: Date.now() }); return () => { clearInterval(interval); @@ -53,10 +45,10 @@ const Panel = defineComponent({ }, }, mounted() { - const disposable = this.api.onDidTitleChange(() => { - this.title = this.api.title; + const disposable = this.params.api.onDidTitleChange(() => { + this.title = this.params.api.title; }); - this.title = this.api.title; + this.title = this.params.api.title; return () => { disposable.dispose(); @@ -78,28 +70,14 @@ interface CustomParams { const Tab = defineComponent({ name: 'Tab', props: { - api: { - type: Object as PropType< - IDockviewPanelHeaderProps['api'] - >, - required: true, - }, - containerApi: { - type: Object as PropType< - IDockviewPanelHeaderProps['containerApi'] - >, - required: true, - }, params: { - type: Object as PropType< - IDockviewPanelHeaderProps['params'] - >, + type: Object as PropType>, required: true, }, }, data() { return { - myValue: this.params.myValue, + myValue: this.params.params.myValue, title: '', }; }, @@ -118,9 +96,9 @@ const Tab = defineComponent({ } const interval = setInterval(() => { - this.api.updateParameters({ myValue: Date.now() }); + this.params.api.updateParameters({ myValue: Date.now() }); }, 1000); - this.api.updateParameters({ myValue: Date.now() }); + this.params.api.updateParameters({ myValue: Date.now() }); return () => { clearInterval(interval); @@ -139,25 +117,15 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - Tab, - }, - data() { - return { - components: { - default: Panel, - }, - tabComponents: { - default: Tab, - }, - }; + defaultPanel: Panel, + defaultTab: Tab, }, methods: { onReady(event: DockviewReadyEvent) { event.api.addPanel({ id: 'panel_1', - component: 'default', - tabComponent: 'default', + component: 'defaultPanel', + tabComponent: 'defaultTab', params: { myValue: Date.now(), }, @@ -165,8 +133,8 @@ const App = defineComponent({ event.api.addPanel({ id: 'panel_2', - component: 'default', - tabComponent: 'default', + component: 'defaultPanel', + tabComponent: 'defaultTab', params: { myValue: Date.now(), }, @@ -178,8 +146,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" - :tabComponents="tabComponents" `, }); diff --git a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts index fb9f02134..e3cfbc0bf 100644 --- a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts +++ b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts @@ -48,18 +48,8 @@ const MaterialIcon = defineComponent({ const LeftAction = defineComponent({ name: 'LeftAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - api: { - type: Object as PropType, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -68,7 +58,7 @@ const LeftAction = defineComponent({ }, methods: { onClick() { - this.containerApi.addPanel({ + this.params.containerApi.addPanel({ id: (++panelCount).toString(), title: `Tab ${panelCount}`, component: 'default', @@ -84,18 +74,8 @@ const LeftAction = defineComponent({ const RightAction = defineComponent({ name: 'RightAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - api: { - type: Object as PropType, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -104,23 +84,25 @@ const RightAction = defineComponent({ }, data() { return { - floating: this.api.location.type === 'floating', + floating: this.params.api.location.type === 'floating', }; }, methods: { onClick() { if (this.floating) { - const group = this.containerApi.addGroup(); + const group = this.params.containerApi.addGroup(); this.group.api.moveTo({ group }); } else { - this.containerApi.addFloatingGroup(this.group); + this.containerApi.addFloatingGroup(this.params.group); } }, }, mounted() { - const disposable = this.group.api.onDidLocationChange((event) => { - this.floating = event.location.type === 'floating'; - }); + const disposable = this.params.group.api.onDidLocationChange( + (event) => { + this.floating = event.location.type === 'floating'; + } + ); return () => { disposable.dispose(); @@ -136,16 +118,8 @@ const RightAction = defineComponent({ const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -155,10 +129,10 @@ const Panel = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidTitleChange(() => { - this.title = this.api.title; + const disposable = this.params.api.onDidTitleChange(() => { + this.title = this.params.api.title; }); - this.title = this.api.title; + this.title = this.params.api.title; return () => { disposable.dispose(); @@ -174,17 +148,12 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - LeftAction, - RightAction, + default: Panel, + leftAction: LeftAction, + rightAction: RightAction, }, data() { return { - components: { - default: Panel, - }, - leftAction: LeftAction, - rightAction: RightAction, api: null as DockviewApi | null, bounds: undefined, disableFloatingGroups: false, @@ -246,11 +215,9 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" :floatingGroupBounds="bounds" - :leftHeaderActionsComponent="leftAction" - :rightHeaderActionsComponent="rightAction" - :prefixHeaderActionsComponent="prefixAction" + leftHeaderActionsComponent="leftAction" + rightHeaderActionsComponent="rightAction" :disableFloatingGroups="disableFloatingGroups"
diff --git a/packages/docs/templates/dockview/group-actions/vue/src/index.ts b/packages/docs/templates/dockview/group-actions/vue/src/index.ts index efe64b599..77d1ae8f6 100644 --- a/packages/docs/templates/dockview/group-actions/vue/src/index.ts +++ b/packages/docs/templates/dockview/group-actions/vue/src/index.ts @@ -2,7 +2,6 @@ import 'dockview-core/dist/styles/dockview.css'; import { PropType, createApp, defineComponent } from 'vue'; import { DockviewVue } from 'dockview-vue'; import { - DockviewGroupPanelApi, DockviewReadyEvent, IDockviewHeaderActionsProps, IDockviewPanelProps, @@ -12,18 +11,8 @@ import './app.css'; const LeftAction = defineComponent({ name: 'LeftAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - api: { - type: Object as PropType, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -33,11 +22,11 @@ const LeftAction = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidActivePanelChange((event) => { + const disposable = this.params.api.onDidActivePanelChange((event) => { this.activePanel = event.panel.id; }); - this.activePanel = this.group.activePanel.id; + this.activePanel = this.params.group.activePanel.id; return () => { disposable.dispose(); @@ -54,18 +43,8 @@ const LeftAction = defineComponent({ const RightAction = defineComponent({ name: 'RightAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - api: { - type: Object as PropType, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -75,7 +54,7 @@ const RightAction = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidActiveChange((event) => { + const disposable = this.params.api.onDidActiveChange((event) => { this.isGroupActive = event.isActive; }); @@ -99,14 +78,8 @@ const RightAction = defineComponent({ const PrefixAction = defineComponent({ name: 'PrefixAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -116,16 +89,8 @@ const PrefixAction = defineComponent({ const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -136,10 +101,10 @@ const Panel = defineComponent({ }, mounted() { - const disposable = this.api.onDidTitleChange(() => { - this.title = this.api.title; + const disposable = this.params.api.onDidTitleChange(() => { + this.title = this.params.api.title; }); - this.title = this.api.title; + this.title = this.params.api.title; return () => { disposable.dispose(); @@ -155,20 +120,10 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - LeftAction, - RightAction, - PrefixAction, - }, - data() { - return { - components: { - default: Panel, - }, - leftAction: LeftAction, - rightAction: RightAction, - prefixAction: PrefixAction, - }; + default: Panel, + leftAction: LeftAction, + rightAction: RightAction, + prefixAction: PrefixAction, }, methods: { onReady(event: DockviewReadyEvent) { @@ -202,10 +157,9 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" - :leftHeaderActionsComponent="leftAction" - :rightHeaderActionsComponent="rightAction" - :prefixHeaderActionsComponent="prefixAction" + leftHeaderActionsComponent="leftAction" + rightHeaderActionsComponent="rightAction" + prefixHeaderActionsComponent="prefixAction" `, }); diff --git a/packages/docs/templates/dockview/layout/vue/src/index.ts b/packages/docs/templates/dockview/layout/vue/src/index.ts index 05983a2d5..2631b0399 100644 --- a/packages/docs/templates/dockview/layout/vue/src/index.ts +++ b/packages/docs/templates/dockview/layout/vue/src/index.ts @@ -65,18 +65,8 @@ const MaterialIcon = defineComponent({ const LeftAction = defineComponent({ name: 'LeftAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - api: { - type: Object as PropType, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -85,7 +75,7 @@ const LeftAction = defineComponent({ }, methods: { onClick() { - this.containerApi.addPanel({ + this.params.containerApi.addPanel({ id: (++panelCount).toString(), title: `Tab ${panelCount}`, component: 'default', @@ -101,16 +91,8 @@ const LeftAction = defineComponent({ const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -120,7 +102,7 @@ const Panel = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); this.title = this.api.title; @@ -139,15 +121,11 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - LeftAction, + default: Panel, + leftAction: LeftAction, }, data() { return { - components: { - default: Panel, - }, - leftAction: LeftAction, api: null as DockviewApi | null, }; }, @@ -219,11 +197,8 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" :floatingGroupBounds="bounds" - :leftHeaderActionsComponent="leftAction" - :rightHeaderActionsComponent="rightAction" - :prefixHeaderActionsComponent="prefixAction" + leftHeaderActionsComponent="leftAction" :disableFloatingGroups="disableFloatingGroups" diff --git a/packages/docs/templates/dockview/locked/vue/src/index.ts b/packages/docs/templates/dockview/locked/vue/src/index.ts index 4edf2df01..45d89386d 100644 --- a/packages/docs/templates/dockview/locked/vue/src/index.ts +++ b/packages/docs/templates/dockview/locked/vue/src/index.ts @@ -1,25 +1,13 @@ import 'dockview-core/dist/styles/dockview.css'; import { PropType, createApp, defineComponent } from 'vue'; import { DockviewVue } from 'dockview-vue'; -import { - DockviewApi, - DockviewReadyEvent, - IDockviewPanelProps, -} from 'dockview-core'; +import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core'; const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -30,7 +18,7 @@ const Panel = defineComponent({ }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); this.title = this.api.title; @@ -50,13 +38,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - }, - data() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -95,7 +77,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" :locked=true `, }); diff --git a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts index 4896c5189..8e6c90044 100644 --- a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts +++ b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts @@ -47,14 +47,8 @@ const MaterialIcon = defineComponent({ const LeftAction = defineComponent({ name: 'LeftAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -63,11 +57,11 @@ const LeftAction = defineComponent({ }, methods: { onClick() { - this.containerApi.addPanel({ + this.parmas.containerApi.addPanel({ id: (++panelCount).toString(), title: `Tab ${panelCount}`, component: 'default', - position: { referenceGroup: this.group }, + position: { referenceGroup: this.params.group }, }); }, }, @@ -80,18 +74,8 @@ const LeftAction = defineComponent({ const RightAction = defineComponent({ name: 'RightAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - api: { - type: Object as PropType, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -101,9 +85,11 @@ const RightAction = defineComponent({ }; }, mounted() { - const disposable = this.containerApi.onDidMaximizedGroupChange(() => { - this.maximized = this.api.isMaximized(); - }); + const disposable = this.params.containerApi.onDidMaximizedGroupChange( + () => { + this.maximized = this.api.isMaximized(); + } + ); this.maximized = this.api.isMaximized(); @@ -133,16 +119,8 @@ const RightAction = defineComponent({ const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -153,7 +131,7 @@ const Panel = defineComponent({ }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); this.title = this.api.title; @@ -172,18 +150,9 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - LeftAction, - RightAction, - }, - data() { - return { - components: { - default: Panel, - }, - leftAction: LeftAction, - rightAction: RightAction, - }; + default: Panel, + leftAction: LeftAction, + rightAction: RightAction, }, methods: { onReady(event: DockviewReadyEvent) { @@ -230,9 +199,8 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" - :leftHeaderActionsComponent="leftAction" - :rightHeaderActionsComponent="rightAction" + leftHeaderActionsComponent="leftAction" + rightHeaderActionsComponent="rightAction" `, }); diff --git a/packages/docs/templates/dockview/nested/vue/src/index.ts b/packages/docs/templates/dockview/nested/vue/src/index.ts index fdd7b610c..68c6d0842 100644 --- a/packages/docs/templates/dockview/nested/vue/src/index.ts +++ b/packages/docs/templates/dockview/nested/vue/src/index.ts @@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core'; const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -25,7 +17,7 @@ const Panel = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); this.title = this.api.title; @@ -44,15 +36,7 @@ const InnerDockview = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - default: Panel, - innerDockview: InnerDockview, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -76,7 +60,6 @@ const InnerDockview = defineComponent({ `, }); @@ -85,16 +68,8 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - InnerDockview, - }, - data() { - return { - components: { - default: Panel, - innerDockview: InnerDockview, - }, - }; + default: Panel, + innerDockview: InnerDockview, }, methods: { onReady(event: DockviewReadyEvent) { @@ -119,7 +94,6 @@ const App = defineComponent({ `, }); diff --git a/packages/docs/templates/dockview/popout-group/vue/src/index.ts b/packages/docs/templates/dockview/popout-group/vue/src/index.ts index 0e512d5c4..a0745da0c 100644 --- a/packages/docs/templates/dockview/popout-group/vue/src/index.ts +++ b/packages/docs/templates/dockview/popout-group/vue/src/index.ts @@ -48,18 +48,8 @@ const MaterialIcon = defineComponent({ const LeftAction = defineComponent({ name: 'LeftAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - api: { - type: Object as PropType, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -68,7 +58,7 @@ const LeftAction = defineComponent({ }, methods: { onClick() { - this.containerApi.addPanel({ + this.params.containerApi.addPanel({ id: (++panelCount).toString(), title: `Tab ${panelCount}`, component: 'default', @@ -84,18 +74,8 @@ const LeftAction = defineComponent({ const RightAction = defineComponent({ name: 'RightAction', props: { - containerApi: { - type: Object as PropType< - IDockviewHeaderActionsProps['containerApi'] - >, - required: true, - }, - api: { - type: Object as PropType, - required: true, - }, - group: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, @@ -104,25 +84,27 @@ const RightAction = defineComponent({ }, data() { return { - isPopout: this.api.location.type === 'popout', + isPopout: this.params.api.location.type === 'popout', }; }, methods: { onClick() { if (this.isPopout) { - const group = this.containerApi.addGroup(); + const group = this.params.containerApi.addGroup(); this.group.api.moveTo({ group }); } else { - this.containerApi.addPopoutGroup(this.group, { + this.params.containerApi.addPopoutGroup(this.params.group, { popoutUrl: '/popout/index.html', }); } }, }, mounted() { - const disposable = this.group.api.onDidLocationChange((event) => { - this.isPopout = event.location.type === 'popout'; - }); + const disposable = this.params.group.api.onDidLocationChange( + (event) => { + this.isPopout = event.location.type === 'popout'; + } + ); return () => { disposable.dispose(); @@ -138,16 +120,8 @@ const RightAction = defineComponent({ const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -157,7 +131,7 @@ const Panel = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); this.title = this.api.title; @@ -176,17 +150,12 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - LeftAction, - RightAction, + default: Panel, + leftAction: LeftAction, + rightAction: RightAction, }, data() { return { - components: { - default: Panel, - }, - leftAction: LeftAction, - rightAction: RightAction, api: null as DockviewApi | null, bounds: undefined, disableFloatingGroups: false, @@ -248,11 +217,10 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" :floatingGroupBounds="bounds" - :leftHeaderActionsComponent="leftAction" - :rightHeaderActionsComponent="rightAction" - :prefixHeaderActionsComponent="prefixAction" + leftHeaderActionsComponent="leftAction" + rightHeaderActionsComponent="rightAction" + prefixHeaderActionsComponent="prefixAction" :disableFloatingGroups="disableFloatingGroups" diff --git a/packages/docs/templates/dockview/render-mode/vue/src/index.ts b/packages/docs/templates/dockview/render-mode/vue/src/index.ts index 670322fdb..5bac60518 100644 --- a/packages/docs/templates/dockview/render-mode/vue/src/index.ts +++ b/packages/docs/templates/dockview/render-mode/vue/src/index.ts @@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core'; const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -27,18 +19,18 @@ const Panel = defineComponent({ }, methods: { onToggleRenderMode() { - this.api.setRenderer( - this.api.renderer === 'onlyWhenVisible' + this.params.api.setRenderer( + this.params.api.renderer === 'onlyWhenVisible' ? 'always' : 'onlyWhenVisible' ); }, }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); - const disposable2 = this.api.onDidRendererChange((event) => { + const disposable2 = this.params.api.onDidRendererChange((event) => { this.renderer = event.renderer; }); @@ -61,14 +53,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -104,7 +89,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" `, }); diff --git a/packages/docs/templates/dockview/resize-container/vue/src/index.ts b/packages/docs/templates/dockview/resize-container/vue/src/index.ts index 5ed8a7dfd..0d9ffe571 100644 --- a/packages/docs/templates/dockview/resize-container/vue/src/index.ts +++ b/packages/docs/templates/dockview/resize-container/vue/src/index.ts @@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core'; const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -25,7 +17,7 @@ const Panel = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); this.title = this.api.title; @@ -44,13 +36,10 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, + default: Panel, }, data() { return { - components: { - default: Panel, - }, value: 50, }; }, @@ -136,7 +125,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" :disableFloatingGroups=true diff --git a/packages/docs/templates/dockview/resize/vue/src/index.ts b/packages/docs/templates/dockview/resize/vue/src/index.ts index b146cc7a0..56d227023 100644 --- a/packages/docs/templates/dockview/resize/vue/src/index.ts +++ b/packages/docs/templates/dockview/resize/vue/src/index.ts @@ -7,16 +7,8 @@ import './resize.css'; const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -29,20 +21,20 @@ const Panel = defineComponent({ }, methods: { onResizeGroupWidth() { - this.api.group.api.setSize({ width: this.width }); + this.params.api.group.api.setSize({ width: this.width }); }, onResizePanelWidth() { - this.api.setSize({ width: this.width }); + this.params.api.setSize({ width: this.width }); }, onResizeGroupHeight() { - this.api.group.api.setSize({ height: this.height }); + this.params.api.group.api.setSize({ height: this.height }); }, onResizePanelHeight() { - this.api.setSize({ height: this.height }); + this.params.api.setSize({ height: this.height }); }, }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); this.title = this.api.title; @@ -73,14 +65,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -127,7 +112,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" `, }); diff --git a/packages/docs/templates/dockview/scrollbars/vue/src/index.ts b/packages/docs/templates/dockview/scrollbars/vue/src/index.ts index b0a6ef01a..728baa889 100644 --- a/packages/docs/templates/dockview/scrollbars/vue/src/index.ts +++ b/packages/docs/templates/dockview/scrollbars/vue/src/index.ts @@ -51,15 +51,9 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - }, - data() { - return { - components: { - fixedHeightContainer: FixedHeightContainer, - overflowContainer: OverflowContainer, - userDefinedOverflowContainer: UserDefinedOverflowContainer, - }, - }; + fixedHeightContainer: FixedHeightContainer, + overflowContainer: OverflowContainer, + userDefinedOverflowContainer: UserDefinedOverflowContainer, }, methods: { onReady(event: DockviewReadyEvent) { @@ -89,7 +83,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" :disableFloatingGroups=true `, }); diff --git a/packages/docs/templates/dockview/tabview/vue/src/index.ts b/packages/docs/templates/dockview/tabview/vue/src/index.ts index bbad09d87..fb4ffc6a9 100644 --- a/packages/docs/templates/dockview/tabview/vue/src/index.ts +++ b/packages/docs/templates/dockview/tabview/vue/src/index.ts @@ -10,16 +10,8 @@ import { const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -29,7 +21,7 @@ const Panel = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); this.title = this.api.title; @@ -48,14 +40,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - setup() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, data() { return { api: null as DockviewApi | null }; @@ -107,7 +92,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" :disableFloatingGroups=true `, }); diff --git a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts index 1a693576a..df0d139cd 100644 --- a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts +++ b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts @@ -10,16 +10,8 @@ import { const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -51,9 +43,9 @@ const Panel = defineComponent({ } const interval = setInterval(() => { - this.api.updateParameters({ myValue: Date.now() }); + this.params.api.updateParameters({ myValue: Date.now() }); }, 1000); - this.api.updateParameters({ myValue: Date.now() }); + this.params.api.updateParameters({ myValue: Date.now() }); return () => { clearInterval(interval); @@ -71,16 +63,8 @@ const Panel = defineComponent({ const Tab = defineComponent({ name: 'Tab', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -91,11 +75,11 @@ const Tab = defineComponent({ }; }, mounted() { - const disposable = this.api.onDidTitleChange(() => { + const disposable = this.params.api.onDidTitleChange(() => { this.title = this.api.title; }); - const disposable2 = this.api.onDidParametersChange(() => { + const disposable2 = this.params.api.onDidParametersChange(() => { this.value = this.params.myValue; }); @@ -119,23 +103,15 @@ const App = defineComponent({ components: { 'dockview-vue': DockviewVue, Panel, - }, - data() { - return { - components: { - default: Panel, - }, - tabComponents: { - default: Tab, - }, - }; + defaultPanel: Panel, + defaultTab: Tab, }, methods: { onReady(event: DockviewReadyEvent) { event.api.addPanel({ id: 'panel_1', - component: 'default', - tabComponent: 'default', + component: 'defaultPanel', + tabComponent: 'defaultTab', params: { myValue: Date.now(), }, @@ -143,8 +119,8 @@ const App = defineComponent({ event.api.addPanel({ id: 'panel_2', - component: 'default', - tabComponent: 'default', + component: 'defaultPanel', + tabComponent: 'defaultTab', params: { myValue: Date.now(), }, @@ -156,8 +132,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" - :tabComponents="tabComponents" `, }); diff --git a/packages/docs/templates/dockview/update-title/vue/src/index.ts b/packages/docs/templates/dockview/update-title/vue/src/index.ts index 48b84bbc7..7a0d1d427 100644 --- a/packages/docs/templates/dockview/update-title/vue/src/index.ts +++ b/packages/docs/templates/dockview/update-title/vue/src/index.ts @@ -1,24 +1,13 @@ import 'dockview-core/dist/styles/dockview.css'; import { PropType, createApp, defineComponent } from 'vue'; import { DockviewVue } from 'dockview-vue'; -import { - DockviewReadyEvent, - IDockviewPanelProps, -} from 'dockview-core'; +import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core'; const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -30,7 +19,7 @@ const Panel = defineComponent({ }, methods: { onChangeTitle() { - this.api.setTitle(this.value); + this.params.api.setTitle(this.value); }, updateTitle(title: string) { this.title = title; @@ -62,14 +51,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -107,7 +89,6 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" `, }); diff --git a/packages/docs/templates/dockview/watermark/vue/src/index.ts b/packages/docs/templates/dockview/watermark/vue/src/index.ts index 047e1bc55..c0478b929 100644 --- a/packages/docs/templates/dockview/watermark/vue/src/index.ts +++ b/packages/docs/templates/dockview/watermark/vue/src/index.ts @@ -12,16 +12,8 @@ import { const Panel = defineComponent({ name: 'Panel', props: { - api: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, - required: true, - }, params: { - type: Object as PropType, + type: Object as PropType, required: true, }, }, @@ -37,27 +29,23 @@ const Panel = defineComponent({ const WatermarkPanel = defineComponent({ name: 'Panel', props: { - group: { - type: Object as PropType, - required: true, - }, - containerApi: { - type: Object as PropType, + params: { + type: Object as PropType, required: true, }, }, setup(props) { - return { isGroup: props.containerApi.groups.length > 0 }; + return { isGroup: props.params.containerApi.groups.length > 0 }; }, methods: { onAddNewPanel() { - this.containerApi.addPanel({ + this.params.containerApi.addPanel({ id: Date.now().toString(), component: 'default', }); }, onCloseGroup() { - this.group?.api.close(); + this.params.group?.api.close(); }, }, template: ` @@ -80,18 +68,16 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, + default: Panel, + watermarkComponent: WatermarkPanel, }, data() { return { - components: { - default: Panel, - }, - watermarkComponent: WatermarkPanel, + api: null as DockviewApi | null, }; }, methods: { - onClick(event: MouseEvent) { + onClick() { if (!this.api) { return; } @@ -99,6 +85,7 @@ const App = defineComponent({ this.api.addGroup(); }, onReady(event: DockviewReadyEvent) { + this.api = event.api; event.api.fromJSON({ grid: { orientation: Orientation.HORIZONTAL, @@ -119,8 +106,7 @@ const App = defineComponent({ style="width:100%;height:100%" class="dockview-theme-abyss" @ready="onReady" - :components="components" - :watermarkComponent="watermarkComponent" + watermarkComponent="watermarkComponent" > `, diff --git a/tsconfig.test.json b/tsconfig.test.json index 2f4702739..cca5e7948 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -2,6 +2,7 @@ "extends": "./tsconfig.base.json", "compilerOptions": { "jsx": "react-jsx", + "noImplicitAny": false, "sourceMap": true }, "include": ["**/*.spec.ts", "./jest-setup.ts"]