diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 4d276169b..856df6dc8 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -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" -} \ No newline at end of file +} diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml index 9c242d324..6b82733a6 100644 --- a/.github/workflows/deploy-docs.yml +++ b/.github/workflows/deploy-docs.yml @@ -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: diff --git a/.gitignore b/.gitignore index 5f1ae726d..e3f290550 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ test-report.xml *.code-workspace yarn-error.log /build +/docs/ diff --git a/lerna.json b/lerna.json index b2d59ced6..5d0c99866 100644 --- a/lerna.json +++ b/lerna.json @@ -3,7 +3,7 @@ "packages/*" ], "useWorkspaces": true, - "version": "1.7.2", + "version": "1.7.3", "npmClient": "yarn", "command": { "publish": { diff --git a/package.json b/package.json index b4938b069..3148b38c4 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/dockview-core/package.json b/packages/dockview-core/package.json index cdceee251..e8bbfe657 100644 --- a/packages/dockview-core/package.json +++ b/packages/dockview-core/package.json @@ -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", diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index c65b960ee..2142045d5 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.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', + }); + }); }); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts index e6d7ab10e..d87ac438b 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts @@ -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'); diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 48978c688..d42ac65a4 100644 --- a/packages/dockview-core/src/api/dockviewPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewPanelApi.ts @@ -19,7 +19,7 @@ export interface DockviewPanelApi > { readonly group: DockviewGroupPanel; readonly isGroupActive: boolean; - readonly title: string; + readonly title: string | undefined; readonly onDidActiveGroupChange: Event; readonly onDidGroupChange: Event; 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; } diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index c058c0015..cc34b1545 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -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 | 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, diff --git a/packages/dockview-core/typedoc.json b/packages/dockview-core/typedoc.json index 51c05e659..952d2032e 100644 --- a/packages/dockview-core/typedoc.json +++ b/packages/dockview-core/typedoc.json @@ -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"] } diff --git a/packages/dockview/package.json b/packages/dockview/package.json index 5f538135d..975e2e48c 100644 --- a/packages/dockview/package.json +++ b/packages/dockview/package.json @@ -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" } } diff --git a/packages/dockview/tsconfig.json b/packages/dockview/tsconfig.json index f1a6f570c..023097d12 100644 --- a/packages/dockview/tsconfig.json +++ b/packages/dockview/tsconfig.json @@ -6,9 +6,6 @@ "jsx": "react", "rootDir": "src" }, - "paths": { - "dockview-core": "../dockview-core" - }, "include": ["src"], "exclude": ["**/node_modules", "src/__tests__"] } diff --git a/packages/dockview/typedoc.json b/packages/dockview/typedoc.json index 51c05e659..b97dde02c 100644 --- a/packages/dockview/typedoc.json +++ b/packages/dockview/typedoc.json @@ -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/**"] } diff --git a/packages/docs/blog/2023-06-03-dockview-1.7.3.md b/packages/docs/blog/2023-06-03-dockview-1.7.3.md new file mode 100644 index 000000000..7a4e6cba8 --- /dev/null +++ b/packages/docs/blog/2023-06-03-dockview-1.7.3.md @@ -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 diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index c66b33e81..835dee189 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -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. - - - + -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. +
+ +> 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: ``` - - - + ### Tab Height Tab height can be controlled through CSS. - - - + ## Groups @@ -709,19 +724,11 @@ If you wish to interact with the drop event from one dockview instance in anothe -### Example - -hello +### Window-like mananger with tabs -hello 2 - -
- -
- -## 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`. diff --git a/packages/docs/package.json b/packages/docs/package.json index c230bb45b..a1a77a4bb 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -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", diff --git a/packages/docs/sandboxes/constraints-dockview/package.json b/packages/docs/sandboxes/constraints-dockview/package.json index e1497330a..3a34098c8 100644 --- a/packages/docs/sandboxes/constraints-dockview/package.json +++ b/packages/docs/sandboxes/constraints-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/constraints-dockview/tsconfig.json b/packages/docs/sandboxes/constraints-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/constraints-dockview/tsconfig.json +++ b/packages/docs/sandboxes/constraints-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/customheader-dockview/package.json b/packages/docs/sandboxes/customheader-dockview/package.json index 8bf9bd86d..d3ede7462 100644 --- a/packages/docs/sandboxes/customheader-dockview/package.json +++ b/packages/docs/sandboxes/customheader-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/customheader-dockview/tsconfig.json b/packages/docs/sandboxes/customheader-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/customheader-dockview/tsconfig.json +++ b/packages/docs/sandboxes/customheader-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/demo-dockview/package.json b/packages/docs/sandboxes/demo-dockview/package.json index 99ba4505f..fe47d8659 100644 --- a/packages/docs/sandboxes/demo-dockview/package.json +++ b/packages/docs/sandboxes/demo-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/demo-dockview/tsconfig.json b/packages/docs/sandboxes/demo-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/demo-dockview/tsconfig.json +++ b/packages/docs/sandboxes/demo-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/dnd-dockview/package.json b/packages/docs/sandboxes/dnd-dockview/package.json index f9ef48454..fec39fd83 100644 --- a/packages/docs/sandboxes/dnd-dockview/package.json +++ b/packages/docs/sandboxes/dnd-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/dnd-dockview/tsconfig.json b/packages/docs/sandboxes/dnd-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/dnd-dockview/tsconfig.json +++ b/packages/docs/sandboxes/dnd-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/dockview-app/package.json b/packages/docs/sandboxes/dockview-app/package.json index b4c4e1d29..edc8773be 100644 --- a/packages/docs/sandboxes/dockview-app/package.json +++ b/packages/docs/sandboxes/dockview-app/package.json @@ -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", diff --git a/packages/docs/sandboxes/dockview-app/tsconfig.json b/packages/docs/sandboxes/dockview-app/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/dockview-app/tsconfig.json +++ b/packages/docs/sandboxes/dockview-app/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/events-dockview/package.json b/packages/docs/sandboxes/events-dockview/package.json index d32c8451d..176fc41c3 100644 --- a/packages/docs/sandboxes/events-dockview/package.json +++ b/packages/docs/sandboxes/events-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/events-dockview/tsconfig.json b/packages/docs/sandboxes/events-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/events-dockview/tsconfig.json +++ b/packages/docs/sandboxes/events-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/externaldnd-dockview/package.json b/packages/docs/sandboxes/externaldnd-dockview/package.json index 10ab655c5..fba6c4e59 100644 --- a/packages/docs/sandboxes/externaldnd-dockview/package.json +++ b/packages/docs/sandboxes/externaldnd-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/externaldnd-dockview/tsconfig.json b/packages/docs/sandboxes/externaldnd-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/externaldnd-dockview/tsconfig.json +++ b/packages/docs/sandboxes/externaldnd-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/package.json b/packages/docs/sandboxes/fullwidthtab-dockview/package.json index 5fddc50b3..ade7f643e 100644 --- a/packages/docs/sandboxes/fullwidthtab-dockview/package.json +++ b/packages/docs/sandboxes/fullwidthtab-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json b/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json +++ b/packages/docs/sandboxes/fullwidthtab-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/groupcontrol-dockview/package.json b/packages/docs/sandboxes/groupcontrol-dockview/package.json index 21e91b3a4..7c88c11f1 100644 --- a/packages/docs/sandboxes/groupcontrol-dockview/package.json +++ b/packages/docs/sandboxes/groupcontrol-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json b/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json +++ b/packages/docs/sandboxes/groupcontrol-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/javascript/fullwidthtab-dockview/package.json b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/package.json new file mode 100644 index 000000000..14c42f556 --- /dev/null +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/package.json @@ -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" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/vanilla-dockview/public/index.html b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/public/index.html similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/public/index.html rename to packages/docs/sandboxes/javascript/fullwidthtab-dockview/public/index.html diff --git a/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.scss b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.scss new file mode 100644 index 000000000..1b1438ec2 --- /dev/null +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.scss @@ -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); + } + } +} diff --git a/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.ts b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.ts new file mode 100644 index 000000000..40eba745d --- /dev/null +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/app.ts @@ -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): void { + this.render(event.params); + } + + private render(params: Record) { + 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): void { + this.render(event.params); + } + + private render(params: Record) { + 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(); + }, + }; +} diff --git a/packages/docs/sandboxes/vanilla-dockview/src/index.ts b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/index.ts similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/src/index.ts rename to packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/index.ts diff --git a/packages/docs/sandboxes/vanilla-dockview/src/styles.css b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/styles.css similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/src/styles.css rename to packages/docs/sandboxes/javascript/fullwidthtab-dockview/src/styles.css diff --git a/packages/docs/sandboxes/javascript/fullwidthtab-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/javascript/fullwidthtab-dockview/tsconfig.json @@ -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 + } +} diff --git a/packages/docs/sandboxes/vanilla-dockview/package.json b/packages/docs/sandboxes/javascript/simple-dockview/package.json similarity index 51% rename from packages/docs/sandboxes/vanilla-dockview/package.json rename to packages/docs/sandboxes/javascript/simple-dockview/package.json index b6bf01665..d06484078 100644 --- a/packages/docs/sandboxes/vanilla-dockview/package.json +++ b/packages/docs/sandboxes/javascript/simple-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/javascript/simple-dockview/public/index.html b/packages/docs/sandboxes/javascript/simple-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts b/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts new file mode 100644 index 000000000..ecce95e0e --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/src/app.ts @@ -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): 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(); + }, + }; +} diff --git a/packages/docs/sandboxes/javascript/simple-dockview/src/index.ts b/packages/docs/sandboxes/javascript/simple-dockview/src/index.ts new file mode 100644 index 000000000..249b56017 --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/src/index.ts @@ -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); +} diff --git a/packages/docs/sandboxes/javascript/simple-dockview/src/styles.css b/packages/docs/sandboxes/javascript/simple-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/javascript/simple-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/simple-dockview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/javascript/simple-dockview/tsconfig.json @@ -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 + } +} diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/package.json b/packages/docs/sandboxes/javascript/tabheight-dockview/package.json new file mode 100644 index 000000000..754b48268 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/package.json @@ -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" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/public/index.html b/packages/docs/sandboxes/javascript/tabheight-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.scss b/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.scss new file mode 100644 index 000000000..315d564ac --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.scss @@ -0,0 +1,3 @@ +.skinny-tabs { + --dv-tabs-and-actions-container-height: 20px; +} diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts b/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts new file mode 100644 index 000000000..ca3535611 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/src/app.ts @@ -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): 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(); + }, + }; +} diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/src/index.ts b/packages/docs/sandboxes/javascript/tabheight-dockview/src/index.ts new file mode 100644 index 000000000..249b56017 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/src/index.ts @@ -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); +} diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/src/styles.css b/packages/docs/sandboxes/javascript/tabheight-dockview/src/styles.css new file mode 100644 index 000000000..a1d49a9b6 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; +} + diff --git a/packages/docs/sandboxes/javascript/tabheight-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/tabheight-dockview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/javascript/tabheight-dockview/tsconfig.json @@ -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 + } +} diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/package.json b/packages/docs/sandboxes/javascript/vanilla-dockview/package.json new file mode 100644 index 000000000..73bc3df0a --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/package.json @@ -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" + ] +} \ No newline at end of file diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html b/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/vanilla-dockview/src/app.ts b/packages/docs/sandboxes/javascript/vanilla-dockview/src/app.ts similarity index 100% rename from packages/docs/sandboxes/vanilla-dockview/src/app.ts rename to packages/docs/sandboxes/javascript/vanilla-dockview/src/app.ts diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts b/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts new file mode 100644 index 000000000..249b56017 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/src/index.ts @@ -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); +} diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/src/styles.css b/packages/docs/sandboxes/javascript/vanilla-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/javascript/vanilla-dockview/tsconfig.json b/packages/docs/sandboxes/javascript/vanilla-dockview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/javascript/vanilla-dockview/tsconfig.json @@ -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 + } +} diff --git a/packages/docs/sandboxes/layout-dockview/package.json b/packages/docs/sandboxes/layout-dockview/package.json index 309473289..f8aafc4e2 100644 --- a/packages/docs/sandboxes/layout-dockview/package.json +++ b/packages/docs/sandboxes/layout-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/layout-dockview/tsconfig.json b/packages/docs/sandboxes/layout-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/layout-dockview/tsconfig.json +++ b/packages/docs/sandboxes/layout-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/nativeapp-dockview/package.json b/packages/docs/sandboxes/nativeapp-dockview/package.json index ad8d43fcc..9ebe7692a 100644 --- a/packages/docs/sandboxes/nativeapp-dockview/package.json +++ b/packages/docs/sandboxes/nativeapp-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json b/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json +++ b/packages/docs/sandboxes/nativeapp-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/nested-dockview/package.json b/packages/docs/sandboxes/nested-dockview/package.json index 4914f99c2..8732f49ac 100644 --- a/packages/docs/sandboxes/nested-dockview/package.json +++ b/packages/docs/sandboxes/nested-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/nested-dockview/tsconfig.json b/packages/docs/sandboxes/nested-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/nested-dockview/tsconfig.json +++ b/packages/docs/sandboxes/nested-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/rendering-dockview/package.json b/packages/docs/sandboxes/rendering-dockview/package.json index c9c6b849a..79f8f007d 100644 --- a/packages/docs/sandboxes/rendering-dockview/package.json +++ b/packages/docs/sandboxes/rendering-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/rendering-dockview/tsconfig.json b/packages/docs/sandboxes/rendering-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/rendering-dockview/tsconfig.json +++ b/packages/docs/sandboxes/rendering-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/resize-dockview/package.json b/packages/docs/sandboxes/resize-dockview/package.json index a8f59f461..451e6f516 100644 --- a/packages/docs/sandboxes/resize-dockview/package.json +++ b/packages/docs/sandboxes/resize-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/resize-dockview/tsconfig.json b/packages/docs/sandboxes/resize-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/resize-dockview/tsconfig.json +++ b/packages/docs/sandboxes/resize-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/resizecontainer-dockview/package.json b/packages/docs/sandboxes/resizecontainer-dockview/package.json index 9763e5795..fb2418926 100644 --- a/packages/docs/sandboxes/resizecontainer-dockview/package.json +++ b/packages/docs/sandboxes/resizecontainer-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json b/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json +++ b/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/simple-dockview/package.json b/packages/docs/sandboxes/simple-dockview/package.json index 217115b06..ab2f1757f 100644 --- a/packages/docs/sandboxes/simple-dockview/package.json +++ b/packages/docs/sandboxes/simple-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/simple-dockview/tsconfig.json b/packages/docs/sandboxes/simple-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/simple-dockview/tsconfig.json +++ b/packages/docs/sandboxes/simple-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/tabheight-dockview/package.json b/packages/docs/sandboxes/tabheight-dockview/package.json index af6d19d63..9b315f76e 100644 --- a/packages/docs/sandboxes/tabheight-dockview/package.json +++ b/packages/docs/sandboxes/tabheight-dockview/package.json @@ -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" ] -} +} \ No newline at end of file diff --git a/packages/docs/sandboxes/tabheight-dockview/tsconfig.json b/packages/docs/sandboxes/tabheight-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/tabheight-dockview/tsconfig.json +++ b/packages/docs/sandboxes/tabheight-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/updatetitle-dockview/package.json b/packages/docs/sandboxes/updatetitle-dockview/package.json index 1c7c2ac45..1fcbb4f55 100644 --- a/packages/docs/sandboxes/updatetitle-dockview/package.json +++ b/packages/docs/sandboxes/updatetitle-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx b/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx index 93a3b1762..8c9115df6 100644 --- a/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx +++ b/packages/docs/sandboxes/updatetitle-dockview/src/app.tsx @@ -6,10 +6,8 @@ import { import * as React from 'react'; const components = { - default: ( - props: IDockviewPanelProps<{ title: string; myValue: string }> - ) => { - const [title, setTitle] = React.useState(props.params.title); + default: (props: IDockviewPanelProps<{ myValue: string }>) => { + const [title, setTitle] = React.useState(props.api.title); const onChange = (event: React.ChangeEvent) => { setTitle(event.target.value); @@ -27,6 +25,7 @@ const components = { + {JSON.stringify(Object.keys(props.params))} ); }, @@ -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 }, }); }; diff --git a/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json b/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json +++ b/packages/docs/sandboxes/updatetitle-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/sandboxes/vanilla-dockview/tsconfig.json b/packages/docs/sandboxes/vanilla-dockview/tsconfig.json deleted file mode 100644 index 6e13e47b5..000000000 --- a/packages/docs/sandboxes/vanilla-dockview/tsconfig.json +++ /dev/null @@ -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 - } -} diff --git a/packages/docs/sandboxes/watermark-dockview/package.json b/packages/docs/sandboxes/watermark-dockview/package.json index c04cc2521..faa017e11 100644 --- a/packages/docs/sandboxes/watermark-dockview/package.json +++ b/packages/docs/sandboxes/watermark-dockview/package.json @@ -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", diff --git a/packages/docs/sandboxes/watermark-dockview/tsconfig.json b/packages/docs/sandboxes/watermark-dockview/tsconfig.json index 6e13e47b5..cdc4fb5f5 100644 --- a/packages/docs/sandboxes/watermark-dockview/tsconfig.json +++ b/packages/docs/sandboxes/watermark-dockview/tsconfig.json @@ -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 + } } diff --git a/packages/docs/scripts/package-docs.js b/packages/docs/scripts/package-docs.js deleted file mode 100644 index 23ce40038..000000000 --- a/packages/docs/scripts/package-docs.js +++ /dev/null @@ -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)); diff --git a/packages/docs/src/components/ui/container.scss b/packages/docs/src/components/ui/container.scss new file mode 100644 index 000000000..e69de29bb diff --git a/packages/docs/src/components/ui/container.tsx b/packages/docs/src/components/ui/container.tsx index 1345315bf..5ad78067e 100644 --- a/packages/docs/src/components/ui/container.tsx +++ b/packages/docs/src/components/ui/container.tsx @@ -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 ( + + ); +}; + +const JavascriptIcon = (props: { height: number; width: number }) => { + return ( + + ); +}; + +export const MultiFrameworkContainer = (props: { + react: React.FC; + typescript: (parent: HTMLElement) => { dispose: () => void }; + sandboxId: string; + height?: number; +}) => { + const ref = React.useRef(null); + + const [framework, setFramework] = React.useState('React'); + + const [animation, setAnimation] = React.useState(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 ( + <> +
+ {animation && ( +
+ +
+ )} + {framework === 'React' && } +
+
+
+ {framework === 'React' ? ( + + ) : ( + + )} + +
+ + +
+ + ); +}; diff --git a/packages/docs/src/components/ui/referenceTable.tsx b/packages/docs/src/components/ui/referenceTable.tsx new file mode 100644 index 000000000..1423122cc --- /dev/null +++ b/packages/docs/src/components/ui/referenceTable.tsx @@ -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 ( + + + + + + + + + + {props.props.map((property) => { + return ( + + + + + + ); + })} + +
PropertyTypeDefault
+ {property.prop} + + {property.type} + + {property.default !== undefined && ( + {property.default} + )} +
+ ); +}; diff --git a/packages/docs/src/components/ui/spinner.scss b/packages/docs/src/components/ui/spinner.scss new file mode 100644 index 000000000..847ee4d22 --- /dev/null +++ b/packages/docs/src/components/ui/spinner.scss @@ -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); + } +} diff --git a/packages/docs/src/components/ui/spinner.tsx b/packages/docs/src/components/ui/spinner.tsx new file mode 100644 index 000000000..9627e3762 --- /dev/null +++ b/packages/docs/src/components/ui/spinner.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import './spinner.scss'; + +export const Spinner = () => { + return ( +
+
+
+
+
+
+ ); +}; diff --git a/packages/docs/static/img/js-icon.svg b/packages/docs/static/img/js-icon.svg new file mode 100644 index 000000000..9650ca78e --- /dev/null +++ b/packages/docs/static/img/js-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/docs/static/img/react-icon.svg b/packages/docs/static/img/react-icon.svg new file mode 100644 index 000000000..ea77a618d --- /dev/null +++ b/packages/docs/static/img/react-icon.svg @@ -0,0 +1,9 @@ + + React Logo + + + + + + + diff --git a/packages/docs/versioned_docs/version-1.7.2/basics.mdx b/packages/docs/versioned_docs/version-1.7.3/basics.mdx similarity index 99% rename from packages/docs/versioned_docs/version-1.7.2/basics.mdx rename to packages/docs/versioned_docs/version-1.7.3/basics.mdx index 33d0270c0..b2c8ebcdb 100644 --- a/packages/docs/versioned_docs/version-1.7.2/basics.mdx +++ b/packages/docs/versioned_docs/version-1.7.3/basics.mdx @@ -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 diff --git a/packages/docs/versioned_docs/version-1.7.2/components/_category_.json b/packages/docs/versioned_docs/version-1.7.3/components/_category_.json similarity index 100% rename from packages/docs/versioned_docs/version-1.7.2/components/_category_.json rename to packages/docs/versioned_docs/version-1.7.3/components/_category_.json diff --git a/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.3/components/dockview.mdx similarity index 95% rename from packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx rename to packages/docs/versioned_docs/version-1.7.3/components/dockview.mdx index b6d1a3e46..835dee189 100644 --- a/packages/docs/versioned_docs/version-1.7.2/components/dockview.mdx +++ b/packages/docs/versioned_docs/version-1.7.3/components/dockview.mdx @@ -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. - - - + -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. +
+ +> 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. @@ -606,15 +619,21 @@ to the entire width of the group. For example: ``` - - - + ### Tab Height - - - +Tab height can be controlled through CSS. + + ## Groups @@ -705,19 +724,11 @@ If you wish to interact with the drop event from one dockview instance in anothe -### Example - -hello +### Window-like mananger with tabs -hello 2 - -
- -
- -## 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`. diff --git a/packages/docs/versioned_docs/version-1.7.2/components/gridview.mdx b/packages/docs/versioned_docs/version-1.7.3/components/gridview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.2/components/gridview.mdx rename to packages/docs/versioned_docs/version-1.7.3/components/gridview.mdx diff --git a/packages/docs/versioned_docs/version-1.7.2/components/paneview.mdx b/packages/docs/versioned_docs/version-1.7.3/components/paneview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.2/components/paneview.mdx rename to packages/docs/versioned_docs/version-1.7.3/components/paneview.mdx diff --git a/packages/docs/versioned_docs/version-1.7.2/components/splitview.mdx b/packages/docs/versioned_docs/version-1.7.3/components/splitview.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.2/components/splitview.mdx rename to packages/docs/versioned_docs/version-1.7.3/components/splitview.mdx diff --git a/packages/docs/versioned_docs/version-1.7.2/index.mdx b/packages/docs/versioned_docs/version-1.7.3/index.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.2/index.mdx rename to packages/docs/versioned_docs/version-1.7.3/index.mdx diff --git a/packages/docs/versioned_docs/version-1.7.2/theme.mdx b/packages/docs/versioned_docs/version-1.7.3/theme.mdx similarity index 100% rename from packages/docs/versioned_docs/version-1.7.2/theme.mdx rename to packages/docs/versioned_docs/version-1.7.3/theme.mdx diff --git a/packages/docs/versioned_sidebars/version-1.7.2-sidebars.json b/packages/docs/versioned_sidebars/version-1.7.3-sidebars.json similarity index 100% rename from packages/docs/versioned_sidebars/version-1.7.2-sidebars.json rename to packages/docs/versioned_sidebars/version-1.7.3-sidebars.json diff --git a/packages/docs/versions.json b/packages/docs/versions.json index 519af9b47..900dc7f77 100644 --- a/packages/docs/versions.json +++ b/packages/docs/versions.json @@ -1,3 +1,3 @@ [ - "1.7.2" -] + "1.7.3" +] \ No newline at end of file diff --git a/scripts/package-docs.js b/scripts/package-docs.js index 11ac3cf51..92c469bac 100644 --- a/scripts/package-docs.js +++ b/scripts/package-docs.js @@ -1,8 +1,11 @@ const fs = require('fs-extra'); const path = require('path'); -const output = path.join(__dirname, '../'); +const output = path.join(__dirname, '../build'); -const docsDir = path.join(__dirname, '../docs/build'); +const websiteDir = path.join(__dirname, '../packages/docs/build'); -fs.copySync(docsDir, path.join(output, 'docs')); +const docsDir = path.join(__dirname, '../docs'); + +fs.copySync(websiteDir, output); +fs.copySync(docsDir, path.join(output, 'typedocs')); diff --git a/scripts/package.js b/scripts/package.js deleted file mode 100644 index 9b0238063..000000000 --- a/scripts/package.js +++ /dev/null @@ -1,15 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); - -const output = path.join(__dirname, '../output'); - -const docsDir = path.join(__dirname, '../packages/dockview/typedocs'); -const webpackAppDir = path.join(__dirname, '../packages/dockview-demo/dist'); -// const storybookAppDir = path.join( -// __dirname, -// '../packages/dockview-demo/storybook-static' -// ); - -fs.copySync(docsDir, path.join(output, 'typedocs')); -fs.copySync(webpackAppDir, path.join(output, 'build')); -// fs.copySync(storybookAppDir, path.join(output, 'storybook-static')); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..a9ac894b9 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./packages/dockview" + }, + { + "path": "./packages/dockview-core" + } + ] +} diff --git a/typedoc.base.json b/typedoc.base.json new file mode 100644 index 000000000..34bcb3e09 --- /dev/null +++ b/typedoc.base.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://typedoc.org/schema.json", + "includeVersion": true +} \ No newline at end of file diff --git a/typedoc.json b/typedoc.json new file mode 100644 index 000000000..5b8c53b5d --- /dev/null +++ b/typedoc.json @@ -0,0 +1,7 @@ +{ + "entryPoints": ["packages/dockview", "packages/dockview-core"], + "name": "Dockview", + "entryPointStrategy": "packages", + "includeVersion": true, + "logLevel": "Verbose" +} diff --git a/yarn.lock b/yarn.lock index f28480a93..cf1e11427 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9918,7 +9918,7 @@ markdown-escapes@^1.0.0: resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535" integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg== -marked@^4.2.12: +marked@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3" integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A== @@ -10136,13 +10136,20 @@ minimatch@^6.1.6: dependencies: brace-expansion "^2.0.1" -minimatch@^7.1.3, minimatch@^7.4.1, minimatch@^7.4.2: +minimatch@^7.4.1, minimatch@^7.4.2: version "7.4.3" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-7.4.3.tgz#012cbf110a65134bb354ae9773b55256cdb045a2" integrity sha512-5UB4yYusDtkRPbRiy1cqZ1IpGNcJCGlEMG17RKzPddpyiPKoCdwohbED8g4QXT0ewCt8LTkQXuljsUfQ3FKM4A== dependencies: brace-expansion "^2.0.1" +minimatch@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.0.tgz#bfc8e88a1c40ffd40c172ddac3decb8451503b56" + integrity sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w== + dependencies: + brace-expansion "^2.0.1" + minimist-options@4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619" @@ -13180,9 +13187,9 @@ shelljs@^0.8.5: rechoir "^0.6.2" shiki@^0.14.1: - version "0.14.1" - resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.1.tgz#9fbe082d0a8aa2ad63df4fbf2ee11ec924aa7ee1" - integrity sha512-+Jz4nBkCBe0mEDqo1eKRcCdjRtrCjozmcbTUjbPTX7OOJfEbTZzlUWlZtGe3Gb5oV1/jnojhG//YZc3rs9zSEw== + version "0.14.2" + resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.2.tgz#d51440800b701392b31ce2336036058e338247a1" + integrity sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A== dependencies: ansi-sequence-parser "^1.1.0" jsonc-parser "^3.2.0" @@ -14249,14 +14256,14 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== -typedoc@^0.23.25: - version "0.23.28" - resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.23.28.tgz#3ce9c36ef1c273fa849d2dea18651855100d3ccd" - integrity sha512-9x1+hZWTHEQcGoP7qFmlo4unUoVJLB0H/8vfO/7wqTnZxg4kPuji9y3uRzEu0ZKez63OJAUmiGhUrtukC6Uj3w== +typedoc@^0.24.7: + version "0.24.7" + resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.24.7.tgz#7eeb272a1894b3789acc1a94b3f2ae8e7330ee39" + integrity sha512-zzfKDFIZADA+XRIp2rMzLe9xZ6pt12yQOhCr7cD7/PBTjhPmMyMvGrkZ2lPNJitg3Hj1SeiYFNzCsSDrlpxpKw== dependencies: lunr "^2.3.9" - marked "^4.2.12" - minimatch "^7.1.3" + marked "^4.3.0" + minimatch "^9.0.0" shiki "^0.14.1" "typescript@^3 || ^4", typescript@^4.9.5: