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

Merge branch 'master' of https://github.com/mathuo/dockview into 255-dispose-of-all-responses-correctly

Browse Source
This commit is contained in:
mathuo 2023-06-04 14:26:58 +01:00
commit 97483623d4
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
107 changed files with 1670 additions and 521 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.codesandbox/ci.json
View File

@ -22,8 +22,11 @@
"/packages/docs/sandboxes/simple-dockview", "/packages/docs/sandboxes/simple-dockview",
"/packages/docs/sandboxes/tabheight-dockview", "/packages/docs/sandboxes/tabheight-dockview",
"/packages/docs/sandboxes/updatetitle-dockview", "/packages/docs/sandboxes/updatetitle-dockview",
"/packages/docs/sandboxes/vanilla-dockview", "/packages/docs/sandboxes/watermark-dockview",
"/packages/docs/sandboxes/watermark-dockview" "/packages/docs/sandboxes/javascript/fullwidthtab-dockview",
"/packages/docs/sandboxes/javascript/simple-dockview",
"/packages/docs/sandboxes/javascript/tabheight-dockview",
"/packages/docs/sandboxes/javascript/vanilla-dockview"
], ],
"node": "16" "node": "16"
} }

6
.github/workflows/deploy-docs.yml vendored
View File

@ -33,8 +33,10 @@ jobs:
working-directory: packages/dockview working-directory: packages/dockview
- run: npm run build - run: npm run build
working-directory: packages/docs working-directory: packages/docs
- run: npm run deploy-docs - run: npm run docs
working-directory: packages/docs working-directory: .
- run: npm run package-docs
working-directory: .
- name: Deploy 🚀 - name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@3.7.1 uses: JamesIves/github-pages-deploy-action@3.7.1
with: with:

1
.gitignore vendored
View File

@ -13,3 +13,4 @@ test-report.xml
*.code-workspace *.code-workspace
yarn-error.log yarn-error.log
/build /build
/docs/

2
lerna.json
View File

@ -3,7 +3,7 @@
"packages/*" "packages/*"
], ],
"useWorkspaces": true, "useWorkspaces": true,
"version": "1.7.2", "version": "1.7.3",
"npmClient": "yarn", "npmClient": "yarn",
"command": { "command": {
"publish": { "publish": {

5
package.json
View File

@ -19,7 +19,9 @@
"bootstrap": "lerna bootstrap", "bootstrap": "lerna bootstrap",
"test:cov": "jest --coverage", "test:cov": "jest --coverage",
"version-beta-build": "lerna version prerelease --preid beta", "version-beta-build": "lerna version prerelease --preid beta",
"publish-app": "lerna publish" "publish-app": "lerna publish",
"docs": "typedoc",
"package-docs": "node scripts/package-docs.js"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -58,6 +60,7 @@
"ts-loader": "^9.4.2", "ts-loader": "^9.4.2",
"tslib": "^2.5.0", "tslib": "^2.5.0",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"typedoc": "^0.24.7",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"webpack": "^5.75.0", "webpack": "^5.75.0",
"webpack-cli": "^5.0.1", "webpack-cli": "^5.0.1",

2
packages/dockview-core/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "dockview-core", "name": "dockview-core",
"version": "1.7.2", "version": "1.7.3",
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support", "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
"main": "./dist/cjs/index.js", "main": "./dist/cjs/index.js",
"types": "./dist/cjs/index.d.ts", "types": "./dist/cjs/index.d.ts",

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

@ -2361,4 +2361,91 @@ describe('dockviewComponent', () => {
panels: {}, panels: {},
}); });
}); });
test('that title and params.title do not conflict', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent({
parentElement: container,
components: {
default: PanelContentPartTest,
},
tabComponents: {
test_tab_id: PanelTabPartTest,
},
orientation: Orientation.HORIZONTAL,
});
dockview.layout(100, 100);
dockview.addPanel({
id: 'panel1',
component: 'default',
title: 'Panel 1',
params: {
title: 'Panel 1',
},
});
dockview.addPanel({
id: 'panel2',
component: 'default',
title: 'Panel 2',
});
dockview.addPanel({
id: 'panel3',
component: 'default',
params: {
title: 'Panel 3',
},
});
expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
grid: {
root: {
type: 'branch',
data: [
{
type: 'leaf',
data: {
views: ['panel1', 'panel2', 'panel3'],
activeView: 'panel3',
id: '1',
},
size: 100,
},
],
size: 100,
},
width: 100,
height: 100,
orientation: 'HORIZONTAL',
},
panels: {
panel1: {
id: 'panel1',
contentComponent: 'default',
params: {
title: 'Panel 1',
},
title: 'Panel 1',
},
panel2: {
id: 'panel2',
contentComponent: 'default',
title: 'Panel 2',
},
panel3: {
id: 'panel3',
contentComponent: 'default',
params: {
title: 'Panel 3',
},
title: 'panel3',
},
},
activeGroup: '1',
});
});
}); });

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

@ -37,7 +37,7 @@ describe('dockviewPanel', () => {
latestTitle = event.title; latestTitle = event.title;
}); });
expect(cut.title).toBe(''); expect(cut.title).toBeUndefined();
cut.init({ title: 'new title', params: {} }); cut.init({ title: 'new title', params: {} });
expect(latestTitle).toBe('new title'); expect(latestTitle).toBe('new title');

4
packages/dockview-core/src/api/dockviewPanelApi.ts
View File

@ -19,7 +19,7 @@ export interface DockviewPanelApi
> { > {
readonly group: DockviewGroupPanel; readonly group: DockviewGroupPanel;
readonly isGroupActive: boolean; readonly isGroupActive: boolean;
readonly title: string; readonly title: string | undefined;
readonly onDidActiveGroupChange: Event<void>; readonly onDidActiveGroupChange: Event<void>;
readonly onDidGroupChange: Event<void>; readonly onDidGroupChange: Event<void>;
close(): void; close(): void;
@ -43,7 +43,7 @@ export class DockviewPanelApiImpl
private readonly disposable = new MutableDisposable(); private readonly disposable = new MutableDisposable();
get title(): string { get title(): string | undefined {
return this.panel.title; return this.panel.title;
} }

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

@ -18,7 +18,7 @@ export interface IDockviewPanel extends IDisposable, IPanel {
readonly view: IDockviewPanelModel; readonly view: IDockviewPanelModel;
readonly group: DockviewGroupPanel; readonly group: DockviewGroupPanel;
readonly api: DockviewPanelApi; readonly api: DockviewPanelApi;
readonly title: string; readonly title: string | undefined;
readonly params: Record<string, any> | undefined; readonly params: Record<string, any> | undefined;
updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void; updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void;
init(params: IGroupPanelInitParameters): void; init(params: IGroupPanelInitParameters): void;
@ -34,13 +34,13 @@ export class DockviewPanel
private _group: DockviewGroupPanel; private _group: DockviewGroupPanel;
private _params?: Parameters; private _params?: Parameters;
private _title: string; private _title: string | undefined;
get params(): Parameters | undefined { get params(): Parameters | undefined {
return this._params; return this._params;
} }
get title(): string { get title(): string | undefined {
return this._title; return this._title;
} }
@ -56,7 +56,6 @@ export class DockviewPanel
readonly view: IDockviewPanelModel readonly view: IDockviewPanelModel
) { ) {
super(); super();
this._title = '';
this._group = group; this._group = group;
this.api = new DockviewPanelApiImpl(this, this._group); this.api = new DockviewPanelApiImpl(this, this._group);
@ -76,13 +75,13 @@ export class DockviewPanel
public init(params: IGroupPanelInitParameters): void { public init(params: IGroupPanelInitParameters): void {
this._params = params.params; this._params = params.params;
this.setTitle(params.title);
this.view.init({ this.view.init({
...params, ...params,
api: this.api, api: this.api,
containerApi: this.containerApi, containerApi: this.containerApi,
}); });
this.setTitle(params.title);
} }
focus(): void { focus(): void {
@ -103,7 +102,7 @@ export class DockviewPanel
} }
setTitle(title: string): void { setTitle(title: string): void {
const didTitleChange = title !== this._params?.title; const didTitleChange = title !== this.title;
if (didTitleChange) { if (didTitleChange) {
this._title = title; this._title = title;
@ -128,10 +127,10 @@ export class DockviewPanel
if (params.title !== this.title) { if (params.title !== this.title) {
this._title = params.title; this._title = params.title;
this.api._onDidTitleChange.fire({ title: this.title }); this.api._onDidTitleChange.fire({ title: params.title });
} }
this.view?.update({ this.view.update({
params: { params: {
params: this._params, params: this._params,
title: this.title, title: this.title,

7
packages/dockview-core/typedoc.json
View File

@ -1,7 +1,4 @@
{ {
"out": "typedocs", "extends": ["../../typedoc.base.json"],
"entryPoints": ["./src/index.ts"], "entryPoints": ["src/index.ts"]
"exclude": ["**/_test/**/*.*", "**/index.ts"],
"excludeExternals": true,
"excludePrivate": true
} }

7
packages/dockview/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "dockview", "name": "dockview",
"version": "1.7.2", "version": "1.7.3",
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support", "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
"main": "./dist/cjs/index.js", "main": "./dist/cjs/index.js",
"types": "./dist/cjs/index.d.ts", "types": "./dist/cjs/index.d.ts",
@ -56,7 +56,7 @@
"author": "https://github.com/mathuo", "author": "https://github.com/mathuo",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"dockview-core": "^1.7.2" "dockview-core": "^1.7.3"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-node-resolve": "^15.0.1",
@ -71,7 +71,6 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"rimraf": "^4.1.2", "rimraf": "^4.1.2",
"rollup": "^3.15.0", "rollup": "^3.15.0",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2"
"typedoc": "^0.23.25"
} }
} }

3
packages/dockview/tsconfig.json
View File

@ -6,9 +6,6 @@
"jsx": "react", "jsx": "react",
"rootDir": "src" "rootDir": "src"
}, },
"paths": {
"dockview-core": "../dockview-core"
},
"include": ["src"], "include": ["src"],
"exclude": ["**/node_modules", "src/__tests__"] "exclude": ["**/node_modules", "src/__tests__"]
} }

8
packages/dockview/typedoc.json
View File

@ -1,7 +1,5 @@
{ {
"out": "typedocs", "extends": ["../../typedoc.base.json"],
"entryPoints": ["./src/index.ts"], "entryPoints": ["src/index.ts"],
"exclude": ["**/_test/**/*.*", "**/index.ts"], "exclude": ["**/dist/**"]
"excludeExternals": true,
"excludePrivate": true
} }

17
packages/docs/blog/2023-06-03-dockview-1.7.3.md Normal file
View File

@ -0,0 +1,17 @@
---
slug: dockview-1.7.3-release
title: Dockview 1.7.3
tags: [release]
---
# Release Notes
Please reference to docs @ [dockview.dev](https://dockview.dev).
## 🚀 Features
## 🛠 Miscs
- Fix bug custom params named 'title' conflicting with built-in tab 'title' object [#258](https://github.com/mathuo/dockview/issues/258)
## 🔥 Breaking changes

55
packages/docs/docs/components/dockview.mdx
View File

@ -2,7 +2,10 @@
description: Dockview Documentation description: Dockview Documentation
--- ---
import { Container } from '@site/src/components/ui/container'; import {
Container,
MultiFrameworkContainer,
} from '@site/src/components/ui/container';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
@ -24,7 +27,11 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app'; import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app'; import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app'; import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app';
import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app';
import { attach as attachNativeDockview } from '@site/sandboxes/javascript/fullwidthtab-dockview/src/app';
# Dockview # Dockview
@ -32,12 +39,16 @@ import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockvie
Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels. Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
<Container sandboxId="simple-dockview"> <MultiFrameworkContainer
<SimpleDockview /> sandboxId="simple-dockview"
</Container> react={SimpleDockview}
typescript={attachSimpleDockview}
/>
You can access the panels associated group through the `panel.group` variable. <br />
The group will always be defined and will change if a panel is moved into another group.
> You can access the panels associated group through the `panel.group` variable.
> The group will always be defined and will change if a panel is moved into another group.
## DockviewReact Component ## DockviewReact Component
@ -608,17 +619,21 @@ to the entire width of the group. For example:
<DockviewReactComponent singleTabMode="fullwidth" {...otherProps} /> <DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
``` ```
<Container sandboxId="fullwidthtab-dockview"> <MultiFrameworkContainer
<DockviewNative /> sandboxId="fullwidthtab-dockview"
</Container> react={DockviewNative}
typescript={attachNativeDockview}
/>
### Tab Height ### Tab Height
Tab height can be controlled through CSS. Tab height can be controlled through CSS.
<Container sandboxId="tabheight-dockview"> <MultiFrameworkContainer
<DockviewTabheight /> sandboxId="tabheight-dockview"
</Container> react={DockviewTabheight}
typescript={attachTabHeightDockview}
/>
## Groups ## Groups
@ -709,19 +724,11 @@ If you wish to interact with the drop event from one dockview instance in anothe
<NestedDockview /> <NestedDockview />
</Container> </Container>
### Example ### Window-like mananger with tabs
hello
<DockviewNative2 /> <DockviewNative2 />
hello 2 ## Vanilla JS
<div style={{ height: '400px', width: '100%' }}>
<App />
</div>
## VanillaJS
> Note: This section is experimental and support for Vanilla JS is a work in progress. > Note: This section is experimental and support for Vanilla JS is a work in progress.
@ -732,6 +739,6 @@ The core library is published as an independant package under the name `dockview
> `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`. > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
<Container <Container
sandboxId="vanilla-dockview" sandboxId="typescript/vanilla-dockview"
injectVanillaJS={attachDockviewVanilla} injectVanillaJS={attachDockviewVanilla}
/> />

7
packages/docs/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "dockview-docs", "name": "dockview-docs",
"version": "1.7.2", "version": "1.7.3",
"private": true, "private": true,
"scripts": { "scripts": {
"docusaurus": "docusaurus", "docusaurus": "docusaurus",
@ -12,8 +12,7 @@
"serve": "docusaurus serve", "serve": "docusaurus serve",
"write-translations": "docusaurus write-translations", "write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids", "write-heading-ids": "docusaurus write-heading-ids",
"typecheck": "tsc", "typecheck": "tsc"
"deploy-docs": "node scripts/package-docs.js"
}, },
"dependencies": { "dependencies": {
"@docusaurus/core": "^2.4.0", "@docusaurus/core": "^2.4.0",
@ -23,7 +22,7 @@
"@minoru/react-dnd-treeview": "^3.4.3", "@minoru/react-dnd-treeview": "^3.4.3",
"axios": "^1.3.3", "axios": "^1.3.3",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"dockview": "^1.7.2", "dockview": "^1.7.3",
"prism-react-renderer": "^1.3.5", "prism-react-renderer": "^1.3.5",
"react": "^18.2.0", "react": "^18.2.0",
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",

3
packages/docs/sandboxes/constraints-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/constraints-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/customheader-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/customheader-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/demo-dockview/package.json
View File

@ -16,7 +16,8 @@
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"@types/uuid": "^9.0.0", "@types/uuid": "^9.0.0",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/demo-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/dnd-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/dnd-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/dockview-app/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/dockview-app/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/events-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/events-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/externaldnd-dockview/package.json
View File

@ -16,7 +16,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/externaldnd-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/fullwidthtab-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/groupcontrol-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

28
packages/docs/sandboxes/javascript/fullwidthtab-dockview/package.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "javascript-fullwidthtab-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.ts",
"dependencies": {
"dockview-core": "*"
},
"devDependencies": {
"typescript": "^4.9.5",
"react-scripts": "*"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

0
packages/docs/sandboxes/vanilla-dockview/public/index.html → packages/docs/sandboxes/javascript/fullwidthtab-dockview/public/index.html
View File

17
packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.scss Normal file
View File

@ -0,0 +1,17 @@
.my-custom-tab {
padding: 0px 8px;
width: 100%;
display: flex;
height: 100%;
align-items: center;
background-color: var(--dv-tabs-and-actions-container-background-color);
.my-custom-tab-icon {
font-size: 16px;
&:hover {
border-radius: 2px;
background-color: var(--dv-icon-hover-background-color);
}
}
}

171
packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.ts Normal file
View File

@ -0,0 +1,171 @@
import {
IGroupPanelInitParameters,
IContentRenderer,
PanelUpdateEvent,
Parameters,
ITabRenderer,
DockviewComponent,
} from 'dockview-core';
import './app.scss';
class DefaultPanel implements IContentRenderer {
private _element: HTMLElement;
private _titleElement: HTMLElement;
private _paramsElement: HTMLElement;
get element(): HTMLElement {
return this._element;
}
constructor() {
this._element = document.createElement('div');
this._element.style.display = 'flex';
this._element.style.justifyContent = 'center';
this._element.style.alignItems = 'center';
this._element.style.color = 'white';
this._element.style.height = '100%';
this._titleElement = document.createElement('span');
this._paramsElement = document.createElement('span');
this._element.appendChild(this._titleElement);
}
init(params: IGroupPanelInitParameters): void {
this.render(params.params);
}
update(event: PanelUpdateEvent<Parameters>): void {
this.render(event.params);
}
private render(params: Record<string, any>) {
this._titleElement.textContent = params.title;
if (params.x) {
if (!this._paramsElement.parentElement) {
this._element.appendChild(this._paramsElement);
}
this._paramsElement.textContent = params.x;
} else {
this._paramsElement.parentElement?.removeChild(this._paramsElement);
}
}
}
class DefaultTab implements ITabRenderer {
private _element: HTMLElement;
private _title: HTMLElement;
get element(): HTMLElement {
return this._element;
}
constructor() {
this._element = document.createElement('div');
this._element.className = 'my-custom-tab';
this._title = document.createElement('span');
const spacer = document.createElement('span');
spacer.style.flexGrow = '1';
const btn1 = document.createElement('span');
btn1.className = 'my-custom-tab-icon material-symbols-outlined';
btn1.textContent = 'minimize';
const btn2 = document.createElement('span');
btn2.className = 'my-custom-tab-icon material-symbols-outlined';
btn2.textContent = 'maximize';
const btn3 = document.createElement('span');
btn3.className = 'my-custom-tab-icon material-symbols-outlined';
btn3.textContent = 'close';
this._element.appendChild(this._title);
this._element.appendChild(spacer);
this._element.appendChild(btn1);
this._element.appendChild(btn2);
this._element.appendChild(btn3);
}
init(params: IGroupPanelInitParameters): void {
this.render(params.params);
}
update(event: PanelUpdateEvent<Parameters>): void {
this.render(event.params);
}
private render(params: Record<string, any>) {
this._title = params.title;
}
}
export function attach(parent: HTMLElement): {
dispose: () => void;
} {
const element = document.createElement('div');
element.className = 'dockview-theme-abyss';
element.style.height = '100%';
element.style.width = '100%';
const dockview = new DockviewComponent({
components: {
default: DefaultPanel,
},
tabComponents: {
default: DefaultTab,
},
singleTabMode: 'fullwidth',
parentElement: element,
});
parent.appendChild(element);
const { clientWidth, clientHeight } = parent;
dockview.layout(clientWidth, clientHeight);
const panel1 = dockview.addPanel({
id: 'panel_1',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 1',
},
});
panel1.group.locked = true;
const panel2 = dockview.addPanel({
id: 'panel_2',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 2',
},
position: {
direction: 'right',
},
});
panel2.group.locked = true;
const panel3 = dockview.addPanel({
id: 'panel_3',
component: 'default',
tabComponent: 'default',
params: {
title: 'Window 3',
},
position: {
direction: 'below',
},
});
panel3.group.locked = true;
return {
dispose: () => {
dockview.dispose();
element.remove();
},
};
}

0
packages/docs/sandboxes/vanilla-dockview/src/index.ts → packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/index.ts
View File

0
packages/docs/sandboxes/vanilla-dockview/src/styles.css → packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/styles.css
View File

18
packages/docs/sandboxes/javascript/fullwidthtab-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}

12
packages/docs/sandboxes/vanilla-dockview/package.json → packages/docs/sandboxes/javascript/simple-dockview/package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "vanilla-dockview", "name": "javascript-simple-dockview",
"description": "", "description": "",
"keywords": [ "keywords": [
"dockview" "dockview"
@ -10,9 +10,15 @@
"dockview-core": "*" "dockview-core": "*"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}, },
"scripts": {},
"browserslist": [ "browserslist": [
">0.2%", ">0.2%",
"not dead", "not dead",

44
packages/docs/sandboxes/javascript/simple-dockview/public/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

120
packages/docs/sandboxes/javascript/simple-dockview/src/app.ts Normal file
View File

@ -0,0 +1,120 @@
import {
DockviewComponent,
IContentRenderer,
IGroupPanelInitParameters,
PanelUpdateEvent,
Parameters,
} from 'dockview-core';
class DefaultPanel implements IContentRenderer {
private _element: HTMLElement;
get element(): HTMLElement {
return this._element;
}
constructor() {
this._element = document.createElement('div');
this._element.style.padding = '20px';
this._element.style.color = 'white';
}
init(params: IGroupPanelInitParameters): void {
this._element.textContent = params.params.title;
}
update(event: PanelUpdateEvent<Parameters>): void {
this._element.textContent = event.params.title;
}
}
export function attach(parent: HTMLElement): {
dispose: () => void;
} {
const element = document.createElement('div');
element.className = 'dockview-theme-abyss';
element.style.height = '100%';
element.style.width = '100%';
const dockview = new DockviewComponent({
components: {
default: DefaultPanel,
},
parentElement: element,
});
parent.appendChild(element);
const { clientWidth, clientHeight } = parent;
dockview.layout(clientWidth, clientHeight);
const panel = dockview.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
});
panel.group.locked = true;
panel.group.header.hidden = true;
dockview.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
});
dockview.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
});
dockview.addPanel({
id: 'panel_4',
component: 'default',
params: {
title: 'Panel 4',
},
position: { referencePanel: 'panel_1', direction: 'right' },
});
const panel5 = dockview.addPanel({
id: 'panel_5',
component: 'default',
params: {
title: 'Panel 5',
},
position: { referencePanel: 'panel_3', direction: 'right' },
});
dockview.addPanel({
id: 'panel_6',
component: 'default',
params: {
title: 'Panel 6',
},
position: { referencePanel: 'panel_5', direction: 'below' },
});
dockview.addPanel({
id: 'panel_7',
component: 'default',
params: {
title: 'Panel 7',
},
position: { referencePanel: 'panel_6', direction: 'right' },
});
return {
dispose: () => {
dockview.dispose();
element.remove();
},
};
}

10
packages/docs/sandboxes/javascript/simple-dockview/src/index.ts Normal file
View File

@ -0,0 +1,10 @@
import './styles.css';
import 'dockview-core/dist/styles/dockview.css';
import { attach } from './app';
const rootElement = document.getElementById('root');
if (rootElement) {
attach(rootElement);
}

16
packages/docs/sandboxes/javascript/simple-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

18
packages/docs/sandboxes/javascript/simple-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}

28
packages/docs/sandboxes/javascript/tabheight-dockview/package.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "javascript-tabheight-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.ts",
"dependencies": {
"dockview-core": "*"
},
"devDependencies": {
"typescript": "^4.9.5",
"react-scripts": "*"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

44
packages/docs/sandboxes/javascript/tabheight-dockview/public/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

3
packages/docs/sandboxes/javascript/tabheight-dockview/src/app.scss Normal file
View File

@ -0,0 +1,3 @@
.skinny-tabs {
--dv-tabs-and-actions-container-height: 20px;
}

110
packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts Normal file
View File

@ -0,0 +1,110 @@
import {
DockviewComponent,
IContentRenderer,
IGroupPanelInitParameters,
PanelUpdateEvent,
Parameters,
} from 'dockview-core';
import './app.scss';
class DefaultPanel implements IContentRenderer {
private _element: HTMLElement;
get element(): HTMLElement {
return this._element;
}
constructor() {
this._element = document.createElement('div');
this._element.style.padding = '20px';
this._element.style.color = 'white';
}
init(params: IGroupPanelInitParameters): void {
this._element.textContent = params.params.title;
}
update(event: PanelUpdateEvent<Parameters>): void {
this._element.textContent = event.params.title;
}
}
export function attach(parent: HTMLElement): {
dispose: () => void;
} {
const element = document.createElement('div');
element.className = 'dockview-theme-abyss skinny-tabs';
element.style.height = '100%';
element.style.width = '100%';
const dockview = new DockviewComponent({
components: {
default: DefaultPanel,
},
parentElement: element,
});
parent.appendChild(element);
const { clientWidth, clientHeight } = parent;
dockview.layout(clientWidth, clientHeight);
dockview.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
});
dockview.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
});
dockview.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
position: { referencePanel: 'panel_1', direction: 'right' },
});
dockview.addPanel({
id: 'panel_4',
component: 'default',
params: {
title: 'Panel 4',
},
position: { referencePanel: 'panel_3', direction: 'right' },
});
dockview.addPanel({
id: 'panel_5',
component: 'default',
params: {
title: 'Panel 5',
},
position: { referencePanel: 'panel_4', direction: 'below' },
});
dockview.addPanel({
id: 'panel_6',
component: 'default',
params: {
title: 'Panel 6',
},
position: { referencePanel: 'panel_5', direction: 'right' },
});
return {
dispose: () => {
dockview.dispose();
element.remove();
},
};
}

10
packages/docs/sandboxes/javascript/tabheight-dockview/src/index.ts Normal file
View File

@ -0,0 +1,10 @@
import './styles.css';
import 'dockview-core/dist/styles/dockview.css';
import { attach } from './app';
const rootElement = document.getElementById('root');
if (rootElement) {
attach(rootElement);
}

16
packages/docs/sandboxes/javascript/tabheight-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

18
packages/docs/sandboxes/javascript/tabheight-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}

28
packages/docs/sandboxes/javascript/vanilla-dockview/package.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "javascript-vanilla-dockview",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.ts",
"dependencies": {
"dockview-core": "*"
},
"devDependencies": {
"typescript": "^4.9.5",
"react-scripts": "*"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

44
packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

0
packages/docs/sandboxes/vanilla-dockview/src/app.ts → packages/docs/sandboxes/javascript/vanilla-dockview/src/app.ts
View File

10
packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts Normal file
View File

@ -0,0 +1,10 @@
import './styles.css';
import 'dockview-core/dist/styles/dockview.css';
import { attach } from './app';
const rootElement = document.getElementById('root');
if (rootElement) {
attach(rootElement);
}

16
packages/docs/sandboxes/javascript/vanilla-dockview/src/styles.css Normal file
View File

@ -0,0 +1,16 @@
body {
margin: 0px;
color: white;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

18
packages/docs/sandboxes/javascript/vanilla-dockview/tsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}

3
packages/docs/sandboxes/layout-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/layout-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/nativeapp-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/nativeapp-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/nested-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/nested-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/rendering-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/rendering-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/resize-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/resize-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/resizecontainer-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/simple-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/simple-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

5
packages/docs/sandboxes/tabheight-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
@ -28,4 +29,4 @@
"not ie <= 11", "not ie <= 11",
"not op_mini all" "not op_mini all"
] ]
} }

34
packages/docs/sandboxes/tabheight-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

3
packages/docs/sandboxes/updatetitle-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

9
packages/docs/sandboxes/updatetitle-dockview/src/app.tsx
View File

@ -6,10 +6,8 @@ import {
import * as React from 'react'; import * as React from 'react';
const components = { const components = {
default: ( default: (props: IDockviewPanelProps<{ myValue: string }>) => {
props: IDockviewPanelProps<{ title: string; myValue: string }> const [title, setTitle] = React.useState<string>(props.api.title);
) => {
const [title, setTitle] = React.useState<string>(props.params.title);
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => { const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setTitle(event.target.value); setTitle(event.target.value);
@ -27,6 +25,7 @@ const components = {
</div> </div>
<input value={title} onChange={onChange} /> <input value={title} onChange={onChange} />
<button onClick={onClick}>Change</button> <button onClick={onClick}>Change</button>
{JSON.stringify(Object.keys(props.params))}
</div> </div>
); );
}, },
@ -44,7 +43,6 @@ export const App: React.FC = () => {
id: 'panel_2', id: 'panel_2',
component: 'default', component: 'default',
title: 'Panel 2', title: 'Panel 2',
position: { referencePanel: panel }, position: { referencePanel: panel },
}); });
@ -60,7 +58,6 @@ export const App: React.FC = () => {
id: 'panel_4', id: 'panel_4',
component: 'default', component: 'default',
title: 'Panel 4', title: 'Panel 4',
position: { referencePanel: panel3 }, position: { referencePanel: panel3 },
}); });
}; };

34
packages/docs/sandboxes/updatetitle-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

20
packages/docs/sandboxes/vanilla-dockview/tsconfig.json
View File

@ -1,20 +0,0 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
}
}

3
packages/docs/sandboxes/watermark-dockview/package.json
View File

@ -14,7 +14,8 @@
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"typescript": "^4.9.5" "typescript": "^4.9.5",
"react-scripts": "*"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

34
packages/docs/sandboxes/watermark-dockview/tsconfig.json
View File

@ -1,20 +1,18 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "build/dist", "outDir": "build/dist",
"module": "esnext", "module": "esnext",
"target": "es5", "target": "es5",
"lib": ["es6", "dom"], "lib": ["es6", "dom"],
"sourceMap": true, "sourceMap": true,
"allowJs": true, "allowJs": true,
"jsx": "react-jsx", "jsx": "react-jsx",
"moduleResolution": "node", "moduleResolution": "node",
"rootDir": "src", "rootDir": "src",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true
"suppressImplicitAnyIndexErrors": true, }
"noUnusedLocals": true
}
} }

8
packages/docs/scripts/package-docs.js
View File

@ -1,8 +0,0 @@
const fs = require('fs-extra');
const path = require('path');
const output = path.join(__dirname, '../../../build');
const docsDir = path.join(__dirname, '../build');
fs.copySync(docsDir, path.join(output));

0
packages/docs/src/components/ui/container.scss Normal file
View File

147
packages/docs/src/components/ui/container.tsx
View File

@ -1,5 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { CodeSandboxButton } from './codeSandboxButton'; import { CodeSandboxButton } from './codeSandboxButton';
import useBaseUrl from '@docusaurus/useBaseUrl';
import './container.scss';
import { Spinner } from './spinner';
export const Container = (props: { export const Container = (props: {
children?: React.ReactNode; children?: React.ReactNode;
@ -41,3 +44,147 @@ export const Container = (props: {
</> </>
); );
}; };
const ReactIcon = (props: { height: number; width: number }) => {
return (
<img
// className="dockview-svg"
style={{ marginRight: '0px 4px' }}
height={props.height}
width={props.width}
src={useBaseUrl('img/react-icon.svg')}
/>
);
};
const JavascriptIcon = (props: { height: number; width: number }) => {
return (
<img
// className="dockview-svg "
style={{ marginRight: '0px 4px' }}
height={props.height}
width={props.width}
src={useBaseUrl('img/js-icon.svg')}
/>
);
};
export const MultiFrameworkContainer = (props: {
react: React.FC;
typescript: (parent: HTMLElement) => { dispose: () => void };
sandboxId: string;
height?: number;
}) => {
const ref = React.useRef<HTMLDivElement>(null);
const [framework, setFramework] = React.useState<string>('React');
const [animation, setAnimation] = React.useState<boolean>(false);
React.useEffect(() => {
setAnimation(true);
setTimeout(() => {
setAnimation(false);
}, 500);
}, [framework]);
React.useEffect(() => {
if (!ref.current) {
return;
}
if (framework === 'Javascript') {
const disposable = props.typescript(ref.current);
return () => {
disposable.dispose();
};
}
return;
}, [props.typescript, framework]);
const sandboxId = React.useMemo(() => {
if (framework === 'Javascript') {
return `javascript/${props.sandboxId}`;
}
return props.sandboxId;
}, [props.sandboxId, framework]);
return (
<>
<div
ref={ref}
style={{
position: 'relative',
height: props.height ? `${props.height}px` : '300px',
}}
>
{animation && (
<div
style={{
background: 'rgba(30,30,30)',
position: 'absolute',
zIndex: 9999,
top: 0,
left: 0,
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Spinner />
</div>
)}
{framework === 'React' && <props.react />}
</div>
<div
style={{
margin: '2px 0px',
padding: '2px 0px',
display: 'flex',
alignItems: 'center',
fontSize: '14px',
height: '24px',
}}
>
<div
className="framework-button"
style={{
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
}}
>
{framework === 'React' ? (
<ReactIcon height={16} width={16} />
) : (
<JavascriptIcon height={16} width={16} />
)}
<select
style={{
border: 'none',
fontWeight: 'bold',
backgroundColor: 'inherit',
cursor: 'inherit',
color: 'inherit',
height: '24px',
}}
onChange={(e) => {
const target = e.target as HTMLSelectElement;
setFramework(target.value);
}}
>
<option value="React">{'React'}</option>
<option value="Javascript">{'Javascript'}</option>
</select>
</div>
<span style={{ flexGrow: 1 }} />
<CodeSandboxButton id={sandboxId} />
</div>
</>
);
};

42
packages/docs/src/components/ui/referenceTable.tsx Normal file
View File

@ -0,0 +1,42 @@
import * as React from 'react';
export interface ReferenceProps {
props: {
prop: string;
default?: string;
type: string;
}[];
}
export const ReferenceTable = (props: ReferenceProps) => {
return (
<table style={{ fontSize: '14px' }}>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
{props.props.map((property) => {
return (
<tr key={property.prop}>
<td>
<code>{property.prop}</code>
</td>
<td>
<code>{property.type}</code>
</td>
<td>
{property.default !== undefined && (
<code>{property.default}</code>
)}
</td>
</tr>
);
})}
</tbody>
</table>
);
};

55
packages/docs/src/components/ui/spinner.scss Normal file
View File

@ -0,0 +1,55 @@
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}

13
packages/docs/src/components/ui/spinner.tsx Normal file
View File

@ -0,0 +1,13 @@
import * as React from 'react';
import './spinner.scss';
export const Spinner = () => {
return (
<div className="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
);
};

4
packages/docs/static/img/js-icon.svg vendored Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
<rect width="630" height="630" fill="#f7df1e"/>
<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 687 B

9
packages/docs/static/img/react-icon.svg vendored Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
<title>React Logo</title>
<circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
<g stroke="#61dafb" stroke-width="1" fill="none">
<ellipse rx="11" ry="4.2"/>
<ellipse rx="11" ry="4.2" transform="rotate(60)"/>
<ellipse rx="11" ry="4.2" transform="rotate(120)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 366 B

1
packages/docs/versioned_docs/version-1.7.2/basics.mdx → packages/docs/versioned_docs/version-1.7.3/basics.mdx vendored
View File

@ -8,7 +8,6 @@ import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
# Basics # Basics
asd
This section will take you through a number of concepts that can be applied to all dockview components. This section will take you through a number of concepts that can be applied to all dockview components.
## Panels ## Panels

0
packages/docs/versioned_docs/version-1.7.2/components/_category_.json → packages/docs/versioned_docs/version-1.7.3/components/_category_.json vendored
View File

61
packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx → packages/docs/versioned_docs/version-1.7.3/components/dockview.mdx vendored
View File

@ -2,7 +2,10 @@
description: Dockview Documentation description: Dockview Documentation
--- ---
import { Container } from '@site/src/components/ui/container'; import {
Container,
MultiFrameworkContainer,
} from '@site/src/components/ui/container';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
@ -24,7 +27,11 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app'; import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app'; import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app'; import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app';
import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app';
import { attach as attachNativeDockview } from '@site/sandboxes/javascript/fullwidthtab-dockview/src/app';
# Dockview # Dockview
@ -32,12 +39,16 @@ import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockvie
Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels. Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
<Container sandboxId="simple-dockview"> <MultiFrameworkContainer
<SimpleDockview /> sandboxId="simple-dockview"
</Container> react={SimpleDockview}
typescript={attachSimpleDockview}
/>
You can access the panels associated group through the `panel.group` variable. <br />
The group will always be defined and will change if a panel is moved into another group.
> You can access the panels associated group through the `panel.group` variable.
> The group will always be defined and will change if a panel is moved into another group.
## DockviewReact Component ## DockviewReact Component
@ -340,7 +351,9 @@ return (
### Third Party Dnd Libraries ### Third Party Dnd Libraries
To be completed... This shows a simple example of a third-party library used inside a panel that relies on drag
and drop functionalities. This examples serves to show that `dockview` doesn't interfer with
any drag and drop logic for other controls.
<Container> <Container>
<DockviewExternalDnd /> <DockviewExternalDnd />
@ -606,15 +619,21 @@ to the entire width of the group. For example:
<DockviewReactComponent singleTabMode="fullwidth" {...otherProps} /> <DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
``` ```
<Container sandboxId="fullwidthtab-dockview"> <MultiFrameworkContainer
<DockviewNative /> sandboxId="fullwidthtab-dockview"
</Container> react={DockviewNative}
typescript={attachNativeDockview}
/>
### Tab Height ### Tab Height
<Container sandboxId="tabheight-dockview"> Tab height can be controlled through CSS.
<DockviewTabheight />
</Container> <MultiFrameworkContainer
sandboxId="tabheight-dockview"
react={DockviewTabheight}
typescript={attachTabHeightDockview}
/>
## Groups ## Groups
@ -705,19 +724,11 @@ If you wish to interact with the drop event from one dockview instance in anothe
<NestedDockview /> <NestedDockview />
</Container> </Container>
### Example ### Window-like mananger with tabs
hello
<DockviewNative2 /> <DockviewNative2 />
hello 2 ## Vanilla JS
<div style={{ height: '400px', width: '100%' }}>
<App />
</div>
## VanillaJS
> Note: This section is experimental and support for Vanilla JS is a work in progress. > Note: This section is experimental and support for Vanilla JS is a work in progress.
@ -728,6 +739,6 @@ The core library is published as an independant package under the name `dockview
> `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`. > `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
<Container <Container
sandboxId="vanilla-dockview" sandboxId="typescript/vanilla-dockview"
injectVanillaJS={attachDockviewVanilla} injectVanillaJS={attachDockviewVanilla}
/> />

0
packages/docs/versioned_docs/version-1.7.2/components/gridview.mdx → packages/docs/versioned_docs/version-1.7.3/components/gridview.mdx vendored
View File

0
packages/docs/versioned_docs/version-1.7.2/components/paneview.mdx → packages/docs/versioned_docs/version-1.7.3/components/paneview.mdx vendored
View File

0
packages/docs/versioned_docs/version-1.7.2/components/splitview.mdx → packages/docs/versioned_docs/version-1.7.3/components/splitview.mdx vendored
View File

0
packages/docs/versioned_docs/version-1.7.2/index.mdx → packages/docs/versioned_docs/version-1.7.3/index.mdx vendored
View File

0
packages/docs/versioned_docs/version-1.7.2/theme.mdx → packages/docs/versioned_docs/version-1.7.3/theme.mdx vendored
View File

0
packages/docs/versioned_sidebars/version-1.7.2-sidebars.json → packages/docs/versioned_sidebars/version-1.7.3-sidebars.json
View File

Some files were not shown because too many files have changed in this diff Show More