From 7eff1da9883d7ec5b74a62ec042725f652dd3798 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 24 Apr 2024 20:08:43 +0100 Subject: [PATCH] feat: vue3 work --- .../__tests__/api/dockviewPanelApi.spec.ts | 16 +- .../components/titlebar/tabsContainer.spec.ts | 192 ++-- .../dockview/dockviewComponent.spec.ts | 981 +++++++++++++----- .../dockview/dockviewGroupPanelModel.spec.ts | 163 +-- .../dockview/dockviewPanelModel.spec.ts | 295 ++---- .../src/dockview/dockviewComponent.ts | 36 +- .../src/dockview/dockviewGroupPanelModel.ts | 12 +- .../src/dockview/dockviewPanelModel.ts | 49 +- .../dockview-core/src/dockview/options.ts | 59 +- packages/dockview-vue/package.json | 4 +- .../dockview-vue/src/dockview/dockview.vue | 226 ++-- packages/dockview-vue/src/utils.ts | 9 +- packages/dockview-vue/vite.config.ts | 1 + packages/dockview/src/dockview/dockview.tsx | 95 +- ....13.0.md => 2024-04-27-dockview-1.13.0.md} | 11 +- packages/docs/package.json | 6 +- .../templates/dockview/basic/vue/src/index.ts | 10 +- .../dockview/custom-header/vue/src/index.ts | 24 +- .../dockview/floating-groups/vue/src/index.ts | 17 +- .../dockview/group-actions/vue/src/index.ts | 25 +- .../dockview/layout/vue/src/index.ts | 13 +- .../dockview/locked/vue/src/index.ts | 9 +- .../dockview/maximize-group/vue/src/index.ts | 20 +- .../dockview/nested/vue/src/index.ts | 24 +- .../dockview/popout-group/vue/src/index.ts | 18 +- .../dockview/render-mode/vue/src/index.ts | 10 +- .../resize-container/vue/src/index.ts | 6 +- .../dockview/resize/vue/src/index.ts | 10 +- .../dockview/scrollbars/vue/src/index.ts | 13 +- .../dockview/tabview/vue/src/index.ts | 10 +- .../update-parameters/vue/src/index.ts | 22 +- .../dockview/update-title/vue/src/index.ts | 10 +- .../dockview/watermark/vue/src/index.ts | 10 +- tsconfig.test.json | 3 +- 34 files changed, 1247 insertions(+), 1162 deletions(-) rename packages/docs/blog/{2024-04-19-dockview-1.13.0.md => 2024-04-27-dockview-1.13.0.md} (68%) 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 98c09a071..1040f996c 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); 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 cd85da0b4..2b730b38e 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(); @@ -1575,17 +1554,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 b90c985f8..3cefdd65b 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 28c7f6306..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,8 +199,7 @@ onMounted(() => { */ instance.value = markRaw(dockview); - console.log(getCurrentInstance()) - + 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 943243677..3125cf892 100644 --- a/packages/dockview-vue/src/utils.ts +++ b/packages/dockview-vue/src/utils.ts @@ -35,11 +35,14 @@ export type ComponentInterface = ComponentOptionsBase< export type VueComponent = DefineComponent; -export function findComponent(parent: ComponentInternalInstance, name: string) { +export function findComponent( + parent: ComponentInternalInstance, + name: string +): VueComponent | null { let instance = parent as any; let component = null; - while (!component && instance.parent) { + while (!component && instance) { component = instance.components?.[name]; instance = instance.parent; } @@ -49,7 +52,7 @@ export function findComponent(parent: ComponentInternalInstance, name: string) { } if (!component) { - throw new Error(`Failed to find Vue Component ${name}`); + throw new Error(`Failed to find Vue Component '${name}'`); } return component; 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 82af92b40..5e4ead023 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -168,26 +168,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({ @@ -269,20 +294,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; @@ -299,7 +324,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]); @@ -307,8 +340,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 } ), @@ -320,7 +373,7 @@ export const DockviewReact = React.forwardRef( return; } dockviewRef.current.updateOptions({ - headerLeftActionComponent: createGroupControlElement( + createLeftHeaderActionComponent: createGroupControlElement( props.leftHeaderActionsComponent, { addPortal } ), @@ -332,7 +385,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 68% 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 00fb4090e..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,6 +12,8 @@ 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) @@ -38,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/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/templates/dockview/basic/vue/src/index.ts b/packages/docs/templates/dockview/basic/vue/src/index.ts index 7ab17e837..d0d895d03 100644 --- a/packages/docs/templates/dockview/basic/vue/src/index.ts +++ b/packages/docs/templates/dockview/basic/vue/src/index.ts @@ -26,14 +26,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - panel: Panel, - }, - }; + panel: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -49,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 e5dcb77be..c36144f5b 100644 --- a/packages/docs/templates/dockview/custom-header/vue/src/index.ts +++ b/packages/docs/templates/dockview/custom-header/vue/src/index.ts @@ -117,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(), }, @@ -143,8 +133,8 @@ const App = defineComponent({ event.api.addPanel({ id: 'panel_2', - component: 'default', - tabComponent: 'default', + component: 'defaultPanel', + tabComponent: 'defaultTab', params: { myValue: Date.now(), }, @@ -156,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 ba18dc67d..e3cfbc0bf 100644 --- a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts +++ b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts @@ -148,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, @@ -220,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 4dbfbdb08..77d1ae8f6 100644 --- a/packages/docs/templates/dockview/group-actions/vue/src/index.ts +++ b/packages/docs/templates/dockview/group-actions/vue/src/index.ts @@ -120,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) { @@ -167,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 8a51c0f69..2631b0399 100644 --- a/packages/docs/templates/dockview/layout/vue/src/index.ts +++ b/packages/docs/templates/dockview/layout/vue/src/index.ts @@ -121,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, }; }, @@ -201,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 674b455cb..45d89386d 100644 --- a/packages/docs/templates/dockview/locked/vue/src/index.ts +++ b/packages/docs/templates/dockview/locked/vue/src/index.ts @@ -38,13 +38,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - }, - data() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -83,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 71815e66a..8e6c90044 100644 --- a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts +++ b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts @@ -150,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) { @@ -208,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 0c2901e87..68c6d0842 100644 --- a/packages/docs/templates/dockview/nested/vue/src/index.ts +++ b/packages/docs/templates/dockview/nested/vue/src/index.ts @@ -36,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) { @@ -68,7 +60,6 @@ const InnerDockview = defineComponent({ `, }); @@ -77,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) { @@ -111,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 83bcca9a2..a0745da0c 100644 --- a/packages/docs/templates/dockview/popout-group/vue/src/index.ts +++ b/packages/docs/templates/dockview/popout-group/vue/src/index.ts @@ -150,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, @@ -222,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 71f2c939b..5bac60518 100644 --- a/packages/docs/templates/dockview/render-mode/vue/src/index.ts +++ b/packages/docs/templates/dockview/render-mode/vue/src/index.ts @@ -53,14 +53,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -96,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 0f2ce6972..0d9ffe571 100644 --- a/packages/docs/templates/dockview/resize-container/vue/src/index.ts +++ b/packages/docs/templates/dockview/resize-container/vue/src/index.ts @@ -36,13 +36,10 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, + default: Panel, }, data() { return { - components: { - default: Panel, - }, value: 50, }; }, @@ -128,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 03752cc94..56d227023 100644 --- a/packages/docs/templates/dockview/resize/vue/src/index.ts +++ b/packages/docs/templates/dockview/resize/vue/src/index.ts @@ -65,14 +65,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -119,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 8eead3a11..fb4ffc6a9 100644 --- a/packages/docs/templates/dockview/tabview/vue/src/index.ts +++ b/packages/docs/templates/dockview/tabview/vue/src/index.ts @@ -40,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 }; @@ -99,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 e31b9145b..df0d139cd 100644 --- a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts +++ b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts @@ -103,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(), }, @@ -127,8 +119,8 @@ const App = defineComponent({ event.api.addPanel({ id: 'panel_2', - component: 'default', - tabComponent: 'default', + component: 'defaultPanel', + tabComponent: 'defaultTab', params: { myValue: Date.now(), }, @@ -140,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 fabb1756b..7a0d1d427 100644 --- a/packages/docs/templates/dockview/update-title/vue/src/index.ts +++ b/packages/docs/templates/dockview/update-title/vue/src/index.ts @@ -51,14 +51,7 @@ const App = defineComponent({ name: 'App', components: { 'dockview-vue': DockviewVue, - Panel, - }, - data() { - return { - components: { - default: Panel, - }, - }; + default: Panel, }, methods: { onReady(event: DockviewReadyEvent) { @@ -96,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 58001df01..c0478b929 100644 --- a/packages/docs/templates/dockview/watermark/vue/src/index.ts +++ b/packages/docs/templates/dockview/watermark/vue/src/index.ts @@ -68,14 +68,11 @@ 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, }; }, @@ -109,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 dac31cbbd..189ec1032 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -1,7 +1,8 @@ { "extends": "./tsconfig.base.json", "compilerOptions": { - "jsx": "react-jsx" + "jsx": "react-jsx", + "noImplicitAny": false }, "include": ["**/*.spec.ts", "./jest-setup.ts"] }