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

feat: vue3 fixes

Browse Source
This commit is contained in:
mathuo 2024-05-09 21:46:01 +01:00
parent 26cd1cc1cc
commit 0ae16cf444
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
15 changed files with 1448 additions and 1432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.codesandbox/ci.json
View File

@ -1,6 +1,7 @@
{
"packages": [
"packages/dockview-core",
"packages/dockview-vue",
"packages/dockview"
],
"sandboxes": [
@ -41,4 +42,4 @@
"/packages/docs/sandboxes/javascript/vanilla-dockview"
],
"node": "18"
}
}

12
packages/dockview-core/src/dockview/dockviewPanel.ts
View File

@ -137,13 +137,6 @@ export class DockviewPanel
if (didTitleChange) {
this._title = title;
this.view.update({
params: {
params: this._params,
title: this.title,
},
});
this.api._onDidTitleChange.fire({ title });
}
}
@ -178,10 +171,7 @@ export class DockviewPanel
// update the view with the updated props
this.view.update({
params: {
params: this._params,
title: this.title,
},
params: this._params,
});
}

2
packages/dockview-vue/jest.config.ts
View File

@ -4,7 +4,7 @@ const config: JestConfigWithTsJest = {
preset: 'ts-jest',
roots: ['<rootDir>/packages/dockview-vue'],
modulePaths: ['<rootDir>/packages/dockview-vue/src'],
displayName: { name: 'dockview', color: 'blue' },
displayName: { name: 'dockview-vue', color: 'blue' },
rootDir: '../../',
collectCoverageFrom: [
'<rootDir>/packages/dockview-vue/src/**/*.{js,jsx,ts,tsx}',

9
packages/dockview-vue/src/dockview/dockview.vue
View File

@ -18,9 +18,8 @@ import {
getCurrentInstance,
} from 'vue';
import {
VueContentRenderer,
VueHeaderActionsRenderer,
VueTabRenderer,
VueRenderer,
VueWatermarkRenderer,
findComponent,
} from '../utils';
@ -81,7 +80,7 @@ onMounted(() => {
getCurrentInstance()!,
options.name
);
return new VueContentRenderer(component!, getCurrentInstance()!);
return new VueRenderer(component!, getCurrentInstance()!);
},
createTabComponent(options) {
let component = findComponent(getCurrentInstance()!, options.name);
@ -94,7 +93,7 @@ onMounted(() => {
}
if (component) {
return new VueTabRenderer(component, getCurrentInstance()!);
return new VueRenderer(component, getCurrentInstance()!);
}
return undefined;
},
@ -175,8 +174,6 @@ onMounted(() => {
*/
instance.value = markRaw(dockview);
console.log(getCurrentInstance());
emit('ready', { api: new DockviewApi(dockview) });
});

78
packages/dockview-vue/src/utils.ts
View File

@ -1,5 +1,7 @@
import type {
DockviewApi,
DockviewGroupPanel,
DockviewPanelApi,
GroupPanelPartInitParameters,
IContentRenderer,
IDockviewPanelHeaderProps,
@ -84,8 +86,8 @@ export function mountVueComponent<T extends Record<string, any>>(
return {
update: (newProps: any) => {
runningProps = { ...props, newProps };
vNode = cloneVNode(vNode, Object.freeze(runningProps));
runningProps = { ...props, ...newProps };
vNode = cloneVNode(vNode, runningProps);
render(vNode, element);
},
dispose: () => {
@ -94,11 +96,13 @@ export function mountVueComponent<T extends Record<string, any>>(
};
}
export class VueContentRenderer implements IContentRenderer {
export class VueRenderer implements ITabRenderer, IContentRenderer {
private _element: HTMLElement;
private _renderDisposable:
| { update: (props: any) => void; dispose: () => void }
| undefined;
private _api: DockviewPanelApi | undefined;
private _containerApi: DockviewApi | undefined;
get element(): HTMLElement {
return this._element;
@ -115,57 +119,9 @@ export class VueContentRenderer implements IContentRenderer {
}
init(parameters: GroupPanelPartInitParameters): void {
const props: IDockviewPanelProps = {
params: parameters.params,
api: parameters.api,
containerApi: parameters.containerApi,
};
this._api = parameters.api;
this._containerApi = parameters.containerApi;
this._renderDisposable?.dispose();
this._renderDisposable = mountVueComponent(
this.component,
this.parent,
{ params: props },
this.element
);
}
update(event: PanelUpdateEvent<Parameters>): void {
const params = event.params;
// TODO: handle prop updates somehow?
this._renderDisposable?.update(params);
}
focus(): void {
// TODO: make optional on interface
}
dispose(): void {
this._renderDisposable?.dispose();
}
}
export class VueTabRenderer implements ITabRenderer {
private _element: HTMLElement;
private _renderDisposable:
| { update: (props: any) => void; dispose: () => void }
| undefined;
get element(): HTMLElement {
return this._element;
}
constructor(
private readonly component: VueComponent,
private readonly parent: ComponentInternalInstance
) {
this._element = document.createElement('div');
this.element.className = 'dv-vue-part';
this.element.style.height = '100%';
this.element.style.width = '100%';
}
init(parameters: GroupPanelPartInitParameters): void {
const props: IDockviewPanelHeaderProps = {
params: parameters.params,
api: parameters.api,
@ -182,9 +138,19 @@ export class VueTabRenderer implements ITabRenderer {
}
update(event: PanelUpdateEvent<Parameters>): void {
if (!this._api || !this._containerApi) {
return;
}
const params = event.params;
// TODO: handle prop updates somehow?
this._renderDisposable?.update(params);
this._renderDisposable?.update({
params: {
params: params,
api: this._api,
containerApi: this._containerApi,
},
});
}
dispose(): void {
@ -232,9 +198,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
}
update(event: PanelUpdateEvent<Parameters>): void {
const params = event.params;
// TODO: handle prop updates somehow?
this._renderDisposable?.update(params);
// noop
}
dispose(): void {

3
packages/dockview/src/dockview/dockview.tsx
View File

@ -3,8 +3,6 @@ import {
DockviewComponent,
DockviewWillDropEvent,
DockviewApi,
IContentRenderer,
ITabRenderer,
DockviewGroupPanel,
IHeaderActionsRenderer,
DockviewDidDropEvent,
@ -16,7 +14,6 @@ import {
PROPERTY_KEYS,
DockviewComponentOptions,
DockviewFrameworkOptions,
IDockviewDisposable,
DockviewDndOverlayEvent,
DockviewReadyEvent,
} from 'dockview-core';

2
packages/dockview/src/dockview/reactContentPart.ts
View File

@ -52,7 +52,7 @@ export class ReactPanelContentPart implements IContentRenderer {
}
public update(event: PanelUpdateEvent) {
this.part?.update(event.params);
this.part?.update({ params: event.params });
}
public layout(_width: number, _height: number): void {

2
packages/dockview/src/dockview/reactHeaderPart.ts
View File

@ -44,7 +44,7 @@ export class ReactPanelHeaderPart implements ITabRenderer {
}
public update(event: PanelUpdateEvent): void {
this.part?.update(event.params);
this.part?.update({ params: event.params });
}
public layout(_width: number, _height: number): void {

19
packages/docs/docs/core/overview.mdx
View File

@ -22,12 +22,21 @@ function onReady(event: DockviewReadyEvent) {
```
</FrameworkSpecific>
<FrameworkSpecific framework='JavaScript'>
<FrameworkSpecific framework='Vue'>
```tsx
const component = new DockviewComponent({
/** options */
});
const App = {
name: 'App',
methods: {
onReady(event: DockviewReadyEvent) {
const api: DockviewApi = event.api;
},
},
template: `
<dockview-vue
@ready="onReady"
>
</dockview-vue>`,
};
```
</FrameworkSpecific>

31
packages/docs/docs/core/panels/register.mdx
View File

@ -39,6 +39,37 @@ return <DockviewReact components={components}/>
</FrameworkSpecific>
<FrameworkSpecific framework='Vue'>
```tsx
const App = {
name: 'App',
components: {
'component_1': VueComponent1,
'component_2': VueComponent2,
},
methods: {
onReady(event: DockviewReadyEvent) {
event.api.addPanel({
id: 'panel_1',
component: 'component_1'
});
event.api.addPanel({
id: 'panel_2',
component: 'component_2'
});
},
},
template: `
<dockview-vue
@ready="onReady"
>
</dockview-vue>`,
};
```
</FrameworkSpecific>
Each panel has an [api](/docs/api/dockview/panelApi) which is used to control specific
features on that individual panel.
The panel also has access the [group api](/docs/api/dockview/groupApi) and the container

52
packages/docs/docs/core/panels/tabs.mdx
View File

@ -31,6 +31,32 @@ return <DockviewReact tabComponents={tabComponents}/>
```
</FrameworkSpecific>
<FrameworkSpecific framework='Vue'>
```tsx
const App = {
name: 'App',
components: {
'component_1': VueComponent1,
'tab_1': VueComponent2,
},
methods: {
onReady(event: DockviewReadyEvent) {
event.api.addPanel({
id: 'panel_1',
component: 'component_1',
tabComponent: 'tab_1'
});
},
},
template: `
<dockview-vue
@ready="onReady"
>
</dockview-vue>`,
};
```
</FrameworkSpecific>
<FrameworkSpecific framework='JavaScript'>
not implemented
</FrameworkSpecific>
@ -51,6 +77,32 @@ return <DockviewReact defaultTabRenderer={CustomTabRenderer}/>
```
</FrameworkSpecific>
<FrameworkSpecific framework='Vue'>
```tsx
const App = {
name: 'App',
components: {
'component_1': VueComponent1,
'tab_1': VueComponent2,
},
methods: {
onReady(event: DockviewReadyEvent) {
event.api.addPanel({
id: 'panel_1',
component: 'component_1',
});
},
},
template: `
<dockview-vue
@ready="onReady"
:defaultTabRenderer='tab_1'
>
</dockview-vue>`,
};
```
</FrameworkSpecific>
<FrameworkSpecific framework='JavaScript'>
not implemented
</FrameworkSpecific>

2610
packages/docs/src/generated/api.output.json
View File

File diff suppressed because it is too large Load Diff

13
packages/docs/templates/dockview/update-parameters/vue/src/index.ts vendored
View File

@ -27,7 +27,7 @@ const Panel = defineComponent({
},
},
mounted() {
const disposable = this.api.onDidTitleChange(() => {
const disposable = this.params.api.onDidTitleChange(() => {
this.title = this.api.title;
});
this.title = this.api.title;
@ -64,14 +64,16 @@ const Tab = defineComponent({
name: 'Tab',
props: {
params: {
type: Object as PropType<IDockviewPanelHeaderProps>,
type: Object as PropType<
IDockviewPanelHeaderProps<{ myValue: number }>
>,
required: true,
},
},
data() {
return {
title: '',
value: null,
value: this.params.params.myValue,
};
},
mounted() {
@ -80,11 +82,12 @@ const Tab = defineComponent({
});
const disposable2 = this.params.api.onDidParametersChange(() => {
this.value = this.params.myValue;
console.log(this.params);
this.value = this.params.params.myValue;
});
this.title = this.api.title;
this.value = this.params.myValue;
this.value = this.params.params.myValue;
return () => {
disposable.dispose();

41
scripts/set-experimental-versions.js
View File

@ -50,22 +50,35 @@ fs.writeFileSync(
// dockview
const dockviewPath = path.join(rootDir, 'packages', 'dockview', 'package.json');
const dockviewPackageJson = JSON.parse(
fs.readFileSync(dockviewPath).toString()
);
const depPackages = ['dockview', 'dockview-vue'];
dockviewPackageJson.version = version;
dockviewPackageJson.dependencies['dockview-core'] = dockviewPackageJson.version;
for (const depPackage of depPackages) {
const dockviewPath = path.join(
rootDir,
'packages',
depPackage,
'package.json'
);
const dockviewPackageJson = JSON.parse(
fs.readFileSync(dockviewPath).toString()
);
fs.writeFileSync(dockviewPath, JSON.stringify(dockviewPackageJson, null, 4));
dockviewPackageJson.version = version;
dockviewPackageJson.dependencies['dockview-core'] =
dockviewPackageJson.version;
// sanity check
fs.writeFileSync(
dockviewPath,
JSON.stringify(dockviewPackageJson, null, 4)
);
const dvCore = JSON.parse(fs.readFileSync(dockviewCorePath).toString());
const dv = JSON.parse(fs.readFileSync(dockviewPath).toString());
// sanity check
console.log(`dockview-core version: ${dvCore.version}`);
console.log(
`dockview version: ${dv.version} dockview-core dependency version: ${dv.dependencies['dockview-core']}`
);
const dvCore = JSON.parse(fs.readFileSync(dockviewCorePath).toString());
const dv = JSON.parse(fs.readFileSync(dockviewPath).toString());
console.log(`dockview-core version: ${dvCore.version}`);
console.log(
`${depPackage} version: ${dv.version} dockview-core dependency version: ${dv.dependencies['dockview-core']}`
);
}

3
tsconfig.json
View File

@ -6,6 +6,9 @@
},
{
"path": "./packages/dockview-core"
},
{
"path": "./packages/dockview-vue"
}
]
}