mirror of
https://github.com/mathuo/dockview
synced 2025-02-19 06:35:45 +00:00
Merge branch 'master' of https://github.com/mathuo/dockview into 255-dispose-of-all-responses-correctly
This commit is contained in:
mathuo
commit
97483623d4
@ -22,8 +22,11 @@
|
||||
"/packages/docs/sandboxes/simple-dockview",
|
||||
"/packages/docs/sandboxes/tabheight-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"
|
||||
}
|
||||
}
|
||||
|
||||
6
.github/workflows/deploy-docs.yml
vendored
6
.github/workflows/deploy-docs.yml
vendored
@ -33,8 +33,10 @@ jobs:
|
||||
working-directory: packages/dockview
|
||||
- run: npm run build
|
||||
working-directory: packages/docs
|
||||
- run: npm run deploy-docs
|
||||
working-directory: packages/docs
|
||||
- run: npm run docs
|
||||
working-directory: .
|
||||
- run: npm run package-docs
|
||||
working-directory: .
|
||||
- name: Deploy 🚀
|
||||
uses: JamesIves/github-pages-deploy-action@3.7.1
|
||||
with:
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -13,3 +13,4 @@ test-report.xml
|
||||
*.code-workspace
|
||||
yarn-error.log
|
||||
/build
|
||||
/docs/
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"packages/*"
|
||||
],
|
||||
"useWorkspaces": true,
|
||||
"version": "1.7.2",
|
||||
"version": "1.7.3",
|
||||
"npmClient": "yarn",
|
||||
"command": {
|
||||
"publish": {
|
||||
|
||||
@ -19,7 +19,9 @@
|
||||
"bootstrap": "lerna bootstrap",
|
||||
"test:cov": "jest --coverage",
|
||||
"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": {
|
||||
"type": "git",
|
||||
@ -58,6 +60,7 @@
|
||||
"ts-loader": "^9.4.2",
|
||||
"tslib": "^2.5.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typedoc": "^0.24.7",
|
||||
"typescript": "^4.9.5",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockview-core",
|
||||
"version": "1.7.2",
|
||||
"version": "1.7.3",
|
||||
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
|
||||
"main": "./dist/cjs/index.js",
|
||||
"types": "./dist/cjs/index.d.ts",
|
||||
|
||||
@ -2361,4 +2361,91 @@ describe('dockviewComponent', () => {
|
||||
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',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -37,7 +37,7 @@ describe('dockviewPanel', () => {
|
||||
latestTitle = event.title;
|
||||
});
|
||||
|
||||
expect(cut.title).toBe('');
|
||||
expect(cut.title).toBeUndefined();
|
||||
|
||||
cut.init({ title: 'new title', params: {} });
|
||||
expect(latestTitle).toBe('new title');
|
||||
|
||||
@ -19,7 +19,7 @@ export interface DockviewPanelApi
|
||||
> {
|
||||
readonly group: DockviewGroupPanel;
|
||||
readonly isGroupActive: boolean;
|
||||
readonly title: string;
|
||||
readonly title: string | undefined;
|
||||
readonly onDidActiveGroupChange: Event<void>;
|
||||
readonly onDidGroupChange: Event<void>;
|
||||
close(): void;
|
||||
@ -43,7 +43,7 @@ export class DockviewPanelApiImpl
|
||||
|
||||
private readonly disposable = new MutableDisposable();
|
||||
|
||||
get title(): string {
|
||||
get title(): string | undefined {
|
||||
return this.panel.title;
|
||||
}
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ export interface IDockviewPanel extends IDisposable, IPanel {
|
||||
readonly view: IDockviewPanelModel;
|
||||
readonly group: DockviewGroupPanel;
|
||||
readonly api: DockviewPanelApi;
|
||||
readonly title: string;
|
||||
readonly title: string | undefined;
|
||||
readonly params: Record<string, any> | undefined;
|
||||
updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void;
|
||||
init(params: IGroupPanelInitParameters): void;
|
||||
@ -34,13 +34,13 @@ export class DockviewPanel
|
||||
private _group: DockviewGroupPanel;
|
||||
private _params?: Parameters;
|
||||
|
||||
private _title: string;
|
||||
private _title: string | undefined;
|
||||
|
||||
get params(): Parameters | undefined {
|
||||
return this._params;
|
||||
}
|
||||
|
||||
get title(): string {
|
||||
get title(): string | undefined {
|
||||
return this._title;
|
||||
}
|
||||
|
||||
@ -56,7 +56,6 @@ export class DockviewPanel
|
||||
readonly view: IDockviewPanelModel
|
||||
) {
|
||||
super();
|
||||
this._title = '';
|
||||
this._group = group;
|
||||
|
||||
this.api = new DockviewPanelApiImpl(this, this._group);
|
||||
@ -76,13 +75,13 @@ export class DockviewPanel
|
||||
public init(params: IGroupPanelInitParameters): void {
|
||||
this._params = params.params;
|
||||
|
||||
this.setTitle(params.title);
|
||||
|
||||
this.view.init({
|
||||
...params,
|
||||
api: this.api,
|
||||
containerApi: this.containerApi,
|
||||
});
|
||||
|
||||
this.setTitle(params.title);
|
||||
}
|
||||
|
||||
focus(): void {
|
||||
@ -103,7 +102,7 @@ export class DockviewPanel
|
||||
}
|
||||
|
||||
setTitle(title: string): void {
|
||||
const didTitleChange = title !== this._params?.title;
|
||||
const didTitleChange = title !== this.title;
|
||||
|
||||
if (didTitleChange) {
|
||||
this._title = title;
|
||||
@ -128,10 +127,10 @@ export class DockviewPanel
|
||||
|
||||
if (params.title !== this.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: this._params,
|
||||
title: this.title,
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
{
|
||||
"out": "typedocs",
|
||||
"entryPoints": ["./src/index.ts"],
|
||||
"exclude": ["**/_test/**/*.*", "**/index.ts"],
|
||||
"excludeExternals": true,
|
||||
"excludePrivate": true
|
||||
"extends": ["../../typedoc.base.json"],
|
||||
"entryPoints": ["src/index.ts"]
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockview",
|
||||
"version": "1.7.2",
|
||||
"version": "1.7.3",
|
||||
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
|
||||
"main": "./dist/cjs/index.js",
|
||||
"types": "./dist/cjs/index.d.ts",
|
||||
@ -56,7 +56,7 @@
|
||||
"author": "https://github.com/mathuo",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dockview-core": "^1.7.2"
|
||||
"dockview-core": "^1.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
@ -71,7 +71,6 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"rimraf": "^4.1.2",
|
||||
"rollup": "^3.15.0",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"typedoc": "^0.23.25"
|
||||
"rollup-plugin-postcss": "^4.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,9 +6,6 @@
|
||||
"jsx": "react",
|
||||
"rootDir": "src"
|
||||
},
|
||||
"paths": {
|
||||
"dockview-core": "../dockview-core"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["**/node_modules", "src/__tests__"]
|
||||
}
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
{
|
||||
"out": "typedocs",
|
||||
"entryPoints": ["./src/index.ts"],
|
||||
"exclude": ["**/_test/**/*.*", "**/index.ts"],
|
||||
"excludeExternals": true,
|
||||
"excludePrivate": true
|
||||
"extends": ["../../typedoc.base.json"],
|
||||
"entryPoints": ["src/index.ts"],
|
||||
"exclude": ["**/dist/**"]
|
||||
}
|
||||
|
||||
17
packages/docs/blog/2023-06-03-dockview-1.7.3.md
Normal file
17
packages/docs/blog/2023-06-03-dockview-1.7.3.md
Normal 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
|
||||
@ -2,7 +2,10 @@
|
||||
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 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 DockviewResizeContainer from '@site/sandboxes/resizecontainer-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
|
||||
|
||||
@ -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.
|
||||
|
||||
<Container sandboxId="simple-dockview">
|
||||
<SimpleDockview />
|
||||
</Container>
|
||||
<MultiFrameworkContainer
|
||||
sandboxId="simple-dockview"
|
||||
react={SimpleDockview}
|
||||
typescript={attachSimpleDockview}
|
||||
/>
|
||||
|
||||
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.
|
||||
<br />
|
||||
|
||||
> 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
|
||||
|
||||
@ -608,17 +619,21 @@ to the entire width of the group. For example:
|
||||
<DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
|
||||
```
|
||||
|
||||
<Container sandboxId="fullwidthtab-dockview">
|
||||
<DockviewNative />
|
||||
</Container>
|
||||
<MultiFrameworkContainer
|
||||
sandboxId="fullwidthtab-dockview"
|
||||
react={DockviewNative}
|
||||
typescript={attachNativeDockview}
|
||||
/>
|
||||
|
||||
### Tab Height
|
||||
|
||||
Tab height can be controlled through CSS.
|
||||
|
||||
<Container sandboxId="tabheight-dockview">
|
||||
<DockviewTabheight />
|
||||
</Container>
|
||||
<MultiFrameworkContainer
|
||||
sandboxId="tabheight-dockview"
|
||||
react={DockviewTabheight}
|
||||
typescript={attachTabHeightDockview}
|
||||
/>
|
||||
|
||||
## Groups
|
||||
|
||||
@ -709,19 +724,11 @@ If you wish to interact with the drop event from one dockview instance in anothe
|
||||
<NestedDockview />
|
||||
</Container>
|
||||
|
||||
### Example
|
||||
|
||||
hello
|
||||
### Window-like mananger with tabs
|
||||
|
||||
<DockviewNative2 />
|
||||
|
||||
hello 2
|
||||
|
||||
<div style={{ height: '400px', width: '100%' }}>
|
||||
<App />
|
||||
</div>
|
||||
|
||||
## VanillaJS
|
||||
## Vanilla JS
|
||||
|
||||
> 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`.
|
||||
|
||||
<Container
|
||||
sandboxId="vanilla-dockview"
|
||||
sandboxId="typescript/vanilla-dockview"
|
||||
injectVanillaJS={attachDockviewVanilla}
|
||||
/>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockview-docs",
|
||||
"version": "1.7.2",
|
||||
"version": "1.7.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
@ -12,8 +12,7 @@
|
||||
"serve": "docusaurus serve",
|
||||
"write-translations": "docusaurus write-translations",
|
||||
"write-heading-ids": "docusaurus write-heading-ids",
|
||||
"typecheck": "tsc",
|
||||
"deploy-docs": "node scripts/package-docs.js"
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.4.0",
|
||||
@ -23,7 +22,7 @@
|
||||
"@minoru/react-dnd-treeview": "^3.4.3",
|
||||
"axios": "^1.3.3",
|
||||
"clsx": "^1.2.1",
|
||||
"dockview": "^1.7.2",
|
||||
"dockview": "^1.7.3",
|
||||
"prism-react-renderer": "^1.3.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dnd": "^16.0.1",
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/uuid": "^9.0.0",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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,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
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "vanilla-dockview",
|
||||
"name": "javascript-simple-dockview",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"dockview"
|
||||
@ -10,9 +10,15 @@
|
||||
"dockview-core": "*"
|
||||
},
|
||||
"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": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
@ -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
120
packages/docs/sandboxes/javascript/simple-dockview/src/app.ts
Normal 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();
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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,0 +1,3 @@
|
||||
.skinny-tabs {
|
||||
--dv-tabs-and-actions-container-height: 20px;
|
||||
}
|
||||
110
packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts
Normal file
110
packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts
Normal 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();
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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,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);
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
@ -28,4 +29,4 @@
|
||||
"not ie <= 11",
|
||||
"not op_mini all"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -6,10 +6,8 @@ import {
|
||||
import * as React from 'react';
|
||||
|
||||
const components = {
|
||||
default: (
|
||||
props: IDockviewPanelProps<{ title: string; myValue: string }>
|
||||
) => {
|
||||
const [title, setTitle] = React.useState<string>(props.params.title);
|
||||
default: (props: IDockviewPanelProps<{ myValue: string }>) => {
|
||||
const [title, setTitle] = React.useState<string>(props.api.title);
|
||||
|
||||
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setTitle(event.target.value);
|
||||
@ -27,6 +25,7 @@ const components = {
|
||||
</div>
|
||||
<input value={title} onChange={onChange} />
|
||||
<button onClick={onClick}>Change</button>
|
||||
{JSON.stringify(Object.keys(props.params))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
@ -44,7 +43,6 @@ export const App: React.FC = () => {
|
||||
id: 'panel_2',
|
||||
component: 'default',
|
||||
title: 'Panel 2',
|
||||
|
||||
position: { referencePanel: panel },
|
||||
});
|
||||
|
||||
@ -60,7 +58,6 @@ export const App: React.FC = () => {
|
||||
id: 'panel_4',
|
||||
component: 'default',
|
||||
title: 'Panel 4',
|
||||
|
||||
position: { referencePanel: panel3 },
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -14,7 +14,8 @@
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"typescript": "^4.9.5"
|
||||
"typescript": "^4.9.5",
|
||||
"react-scripts": "*"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,20 +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,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
"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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
0
packages/docs/src/components/ui/container.scss
Normal file
@ -1,5 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import { CodeSandboxButton } from './codeSandboxButton';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import './container.scss';
|
||||
import { Spinner } from './spinner';
|
||||
|
||||
export const Container = (props: {
|
||||
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
42
packages/docs/src/components/ui/referenceTable.tsx
Normal 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
55
packages/docs/src/components/ui/spinner.scss
Normal 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
13
packages/docs/src/components/ui/spinner.tsx
Normal 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
4
packages/docs/static/img/js-icon.svg
vendored
Normal 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>
|
||||
|
After Width: | Height: | Size: 687 B |
9
packages/docs/static/img/react-icon.svg
vendored
Normal file
9
packages/docs/static/img/react-icon.svg
vendored
Normal 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>
|
||||
|
After Width: | Height: | Size: 366 B |
@ -8,7 +8,6 @@ import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
|
||||
|
||||
# Basics
|
||||
|
||||
asd
|
||||
This section will take you through a number of concepts that can be applied to all dockview components.
|
||||
|
||||
## Panels
|
||||
@ -2,7 +2,10 @@
|
||||
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 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 DockviewResizeContainer from '@site/sandboxes/resizecontainer-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
|
||||
|
||||
@ -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.
|
||||
|
||||
<Container sandboxId="simple-dockview">
|
||||
<SimpleDockview />
|
||||
</Container>
|
||||
<MultiFrameworkContainer
|
||||
sandboxId="simple-dockview"
|
||||
react={SimpleDockview}
|
||||
typescript={attachSimpleDockview}
|
||||
/>
|
||||
|
||||
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.
|
||||
<br />
|
||||
|
||||
> 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
|
||||
|
||||
@ -340,7 +351,9 @@ return (
|
||||
|
||||
### 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>
|
||||
<DockviewExternalDnd />
|
||||
@ -606,15 +619,21 @@ to the entire width of the group. For example:
|
||||
<DockviewReactComponent singleTabMode="fullwidth" {...otherProps} />
|
||||
```
|
||||
|
||||
<Container sandboxId="fullwidthtab-dockview">
|
||||
<DockviewNative />
|
||||
</Container>
|
||||
<MultiFrameworkContainer
|
||||
sandboxId="fullwidthtab-dockview"
|
||||
react={DockviewNative}
|
||||
typescript={attachNativeDockview}
|
||||
/>
|
||||
|
||||
### Tab Height
|
||||
|
||||
<Container sandboxId="tabheight-dockview">
|
||||
<DockviewTabheight />
|
||||
</Container>
|
||||
Tab height can be controlled through CSS.
|
||||
|
||||
<MultiFrameworkContainer
|
||||
sandboxId="tabheight-dockview"
|
||||
react={DockviewTabheight}
|
||||
typescript={attachTabHeightDockview}
|
||||
/>
|
||||
|
||||
## Groups
|
||||
|
||||
@ -705,19 +724,11 @@ If you wish to interact with the drop event from one dockview instance in anothe
|
||||
<NestedDockview />
|
||||
</Container>
|
||||
|
||||
### Example
|
||||
|
||||
hello
|
||||
### Window-like mananger with tabs
|
||||
|
||||
<DockviewNative2 />
|
||||
|
||||
hello 2
|
||||
|
||||
<div style={{ height: '400px', width: '100%' }}>
|
||||
<App />
|
||||
</div>
|
||||
|
||||
## VanillaJS
|
||||
## Vanilla JS
|
||||
|
||||
> 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`.
|
||||
|
||||
<Container
|
||||
sandboxId="vanilla-dockview"
|
||||
sandboxId="typescript/vanilla-dockview"
|
||||
injectVanillaJS={attachDockviewVanilla}
|
||||
/>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user